/** * CodeX Editor * https://ifmo.su/editor * @author CodeX team team@ifmo.su */ var cEditor = (function (cEditor) { // Default settings cEditor.settings = { tools : ['paragraph', 'header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile'], textareaId : 'codex-editor', // First-level tags viewing as separated blocks. Other'll be inserted as child blockTags : ['P','BLOCKQUOTE','UL','CODE','OL','H1','H2','H3','H4','H5','H6'] }; // Static nodes cEditor.nodes = { textarea : null, wrapper : null, toolbar : null, showSettingsButton : null, blockSettings : null, toolbarButtons : {}, // { type : DomEl, ... } redactor : null, } // Current editor state cEditor.state = { html : '', blocks : [] } /** * Initialization * @uses Promise cEditor.core.prepare * @param {} userSettings are : * - tools [], * - textareaId String * ... */ cEditor.start = function (userSettings) { // Prepare editor settings this.core.prepare(userSettings) // If all ok, make UI, bind events and parse initial-content .then(this.ui.make) .then(this.ui.addTools) .then(this.ui.bindEvents) // .then(this.parser.parseTextareaContent) .then(this.renderer.makeBlocksFromData) .catch(function (error) { cEditor.core.log('Initialization failed with error: %o', 'warn', error); }) }; return cEditor; })({}); /** * Redactor core methods * Methods: * - init * - log * - insertAfter * - isDomNode */ cEditor.core = { /** * Editor preparing method * @return Promise */ prepare : function (userSettings) { return new Promise(function(resolve, reject){ if ( userSettings ) { cEditor.settings.tools = userSettings.tools || cEditor.settings.tools; } if (userSettings.data) { cEditor.state.blocks = userSettings.data; } cEditor.nodes.textarea = document.getElementById(userSettings.textareaId || cEditor.settings.textareaId); if (typeof cEditor.nodes.textarea == undefined || cEditor.nodes.textarea == null) { reject(Error("Textarea wasn't found by ID: #" + userSettings.textareaId)); } else { resolve(); } }); }, /** * Logging method * @param type = ['log', 'info', 'warn'] */ log : function (msg, type, arg) { type = type || 'log'; if (!arg) { arg = msg || 'undefined'; msg = '[codex-editor]: %o'; } else { msg = '[codex-editor]: ' + msg; } try{ if ( 'console' in window && console[ type ] ){ if ( arg ) console[ type ]( msg , arg ); else console[ type ]( msg ); } }catch(e){} }, /** * Helper for insert one element after another */ insertAfter : function (target, element) { target.parentNode.insertBefore(element, target.nextSibling); }, /** * Readable DOM-node types map */ nodeTypes : { TAG : 1, TEXT : 3, COMMENT : 8 }, /** * Readable keys map */ keys : { BACKSPACE: 8, TAB: 9, ENTER: 13, SHIFT: 16, CTRL: 17, ALT: 18, ESC: 27, SPACE: 32, LEFT: 37, UP: 38, DOWN: 40, RIGHT: 39, DELETE: 46, META: 91 }, /** * Check object for DOM node */ isDomNode : function (el) { return el && typeof el === 'object' && el.nodeType && el.nodeType == this.nodeTypes.TAG; } } /** * Methods for parsing JSON reactor data to HTML blocks */ cEditor.renderer = { /** * Asyncronously parses input JSON to redactor blocks */ makeBlocksFromData : function (argument) { Promise.resolve() /** First, get JSON from state */ .then(function() { return cEditor.state.blocks; }) /** Then, start to iterate they */ .then(cEditor.renderer.appendBlocks) /** Write log if something goes wrong */ .catch(function(error) { cEditor.core.log('Error while parsing JSON: %o', 'error', error); }); }, /** * Parses JSON to blocks * @param {object} data * @return Primise -> nodeList */ appendBlocks : function (data) { var blocks = data.items; /** * Sequence of one-by-one blocks appending * Uses to save blocks order after async-handler */ var nodeSequence = Promise.resolve(); for (var index = 0; index < blocks.length ; index++ ) { /** Add node to sequence at specified index */ cEditor.renderer.appendNodeAtIndex(nodeSequence, blocks, index); } }, /** * Append node at specified index */ appendNodeAtIndex : function (nodeSequence, blocks, index) { /** We need to append node to sequence */ nodeSequence /** first, get node async-aware */ .then(function() { return cEditor.renderer.getNodeAsync(blocks , index); }) /** * second, compose editor-block from JSON object */ .then(cEditor.renderer.createBlockFromData) /** * now insert block to redactor */ .then(function(blockData){ /** * blockData has 'block' and 'type' information */ cEditor.content.insertBlock(blockData.block, blockData.type); /** Pass created block to next step */ return blockData.block; }) /** * add handlers to new block */ .then(cEditor.ui.addBlockHandlers) /** Log if something wrong with node */ .catch(function(error) { cEditor.core.log('Node skipped while parsing because %o', 'error', error); }); }, /** * Asynchronously returns block data from blocksList by index * @return Promise to node */ getNodeAsync : function (blocksList, index) { return Promise.resolve().then(function() { return blocksList[index]; }); }, /** * Creates editor block by JSON-data * * @uses render method of each plugin * * @param {object} blockData looks like * { header : { * text: '', * type: 'H3', ... * } * } * @return {object} with type and Element */ createBlockFromData : function (blockData) { /** Get first key of object that stores plugin name */ for (var pluginName in blockData) break; /** Check for plugin existance */ if (!cEditor.tools[pluginName]) { throw Error(`Plugin «${pluginName}» not found`); } /** Check for plugin having render method */ if (typeof cEditor.tools[pluginName].render != 'function') { throw Error(`Plugin «${pluginName}» must have «render» method`); } /** Fire the render method with data */ var block = cEditor.tools[pluginName].render(blockData[pluginName]); /** Retrun type and block */ return { type : pluginName, block : block } }, } /** * Methods for saving HTML blocks to JSON object */ cEditor.saver = { /** * Saves blocks */ saveBlocks : function (argument) { console.info('saver saveBlocks'); } } cEditor.ui = { /** Blocks name. */ BLOCK_CLASSNAME : 'ce_block', /** * Making main interface */ make : function () { var wrapper, toolbar, redactor, blockSettings, showSettingsButton; /** Make editor wrapper */ wrapper = cEditor.draw.wrapper(); /** Append editor wrapper after initial textarea */ cEditor.core.insertAfter(cEditor.nodes.textarea, wrapper); /** Make toolbar and content-editable redactor */ toolbar = cEditor.draw.toolbar(); showSettingsButton = cEditor.draw.settingsButton(); blockSettings = cEditor.draw.blockSettings(); redactor = cEditor.draw.redactor(); toolbar.appendChild(showSettingsButton); toolbar.appendChild(blockSettings); wrapper.appendChild(toolbar); wrapper.appendChild(redactor); /** Save created ui-elements to static nodes state */ cEditor.nodes.wrapper = wrapper; cEditor.nodes.toolbar = toolbar; cEditor.nodes.blockSettings = blockSettings; cEditor.nodes.showSettingsButton = showSettingsButton; cEditor.nodes.redactor = redactor; }, /** * Append tools passed in cEditor.tools */ addTools : function () { var tool, tool_button; /** Make toolbar buttons */ for (var name in cEditor.tools){ tool = cEditor.tools[name]; if (!tool.iconClassname) { cEditor.core.log('Toolbar icon classname missed. Tool %o skipped', 'warn', name); continue; } tool_button = cEditor.draw.toolbarButton(name, tool.iconClassname); cEditor.nodes.toolbar.appendChild(tool_button); /** Save tools to static nodes */ cEditor.nodes.toolbarButtons[name] = tool_button; } }, /** * Bind editor UI events */ bindEvents : function () { cEditor.core.log('ui.bindEvents fired', 'info'); /** All keydowns on Document */ document.addEventListener('keydown', function (event) { cEditor.callback.globalKeydown(event); }, false ); /** All keydowns on Document */ document.addEventListener('keyup', function (event) { cEditor.callback.globalKeyup(event); }, false ); /** Mouse click to radactor */ cEditor.nodes.redactor.addEventListener('click', function (event) { cEditor.callback.redactorClicked(event); cEditor.caret.save(); }, false ); /** Clicks to SETTINGS button in toolbar */ cEditor.nodes.showSettingsButton.addEventListener('click', function (event) { cEditor.callback.showSettingsButtonClicked(event); }, false ); /** * @deprecated; * Any redactor changes: keyboard input, mouse cut/paste, drag-n-drop text */ cEditor.nodes.redactor.addEventListener('input', function (event) { /** Saving caret in every modifications */ cEditor.caret.save(); cEditor.callback.redactorInputEvent(event); }, false ); /** Bind click listeners on toolbar buttons */ for (button in cEditor.nodes.toolbarButtons){ cEditor.nodes.toolbarButtons[button].addEventListener('click', function (event) { cEditor.callback.toolbarButtonClicked(event, this); }, false); }; }, addBlockHandlers : function(block) { if (!block) return; block.addEventListener('keydown', function(event) { cEditor.callback.blockKeydown(event, block); }, false); block.addEventListener('paste', function (event) { cEditor.callback.blockPaste(event, block); }, false); } }; cEditor.callback = { redactorSyncTimeout : null, globalKeydown : function(event){ switch (event.keyCode){ case cEditor.core.keys.TAB : this.tabKeyPressed(event); break; case cEditor.core.keys.ENTER : this.enterKeyPressed(event); break; case cEditor.core.keys.ESC : this.escapeKeyPressed(event); break; } }, globalKeyup : function(event){ switch (event.keyCode){ case cEditor.core.keys.UP : case cEditor.core.keys.LEFT : case cEditor.core.keys.RIGHT : case cEditor.core.keys.DOWN : this.arrowKeyPressed(event); break; } }, tabKeyPressed : function(event){ if ( !cEditor.toolbar.opened ) { cEditor.toolbar.open(); } else { cEditor.toolbar.leaf(); } event.preventDefault(); }, enterKeyPressed : function(event){ cEditor.content.workingNodeChanged(); if ( cEditor.toolbar.opened && event.target == cEditor.content.currentNode) { event.preventDefault(); cEditor.toolbar.toolClicked(event); cEditor.toolbar.close(); }; }, escapeKeyPressed : function(event){ cEditor.toolbar.close(); event.preventDefault(); }, arrowKeyPressed : function(event){ cEditor.content.workingNodeChanged(); /* Closing toolbar */ cEditor.toolbar.close(); cEditor.toolbar.move(); }, redactorClicked : function (event) { cEditor.content.workingNodeChanged(); cEditor.toolbar.move(); cEditor.toolbar.open(); cEditor.toolbar.settings.close(); }, /** * Toolbar button click handler * @param this - cursor to the button */ toolbarButtonClicked : function (event, button) { cEditor.toolbar.current = button.dataset.type; cEditor.toolbar.toolClicked(event); cEditor.toolbar.close(); }, redactorInputEvent : function (event) { /** * Clear previous sync-timeout */ if (this.redactorSyncTimeout){ clearTimeout(this.redactorSyncTimeout); } /** * Start waiting to input finish and sync redactor */ this.redactorSyncTimeout = setTimeout(function() { cEditor.content.sync(); }, 500); }, /** * Block handlers for KeyDown events */ blockKeydown : function(event, block) { switch (event.keyCode){ case cEditor.core.keys.DOWN: case cEditor.core.keys.RIGHT: cEditor.callback.blockRightOrDownArrowPressed(block); break; case cEditor.core.keys.ENTER: cEditor.callback.enterPressed(block); break; case cEditor.core.keys.BACKSPACE: cEditor.callback.backspacePressed(block); break; case cEditor.core.keys.UP: case cEditor.core.keys.LEFT: cEditor.callback.blockLeftOrUpArrowPressed(block); break; } }, /** * RIGHT or DOWN keydowns on block */ blockRightOrDownArrowPressed : function (block) { var selection = window.getSelection(), focusedNode = selection.anchorNode, focusedNodeHolder; /** Check for caret existance */ if (!focusedNode){ return false; } /** Saving caret after keydown event happend */ cEditor.caret.save(); /** Looking for closest (parent) contentEditable element of focused node */ while (focusedNode.className != cEditor.ui.BLOCK_CLASSNAME) { focusedNodeHolder = focusedNode.parentNode; focusedNode = focusedNodeHolder; } /** Founded contentEditable element doesn't have childs */ if (focusedNode.childNodes.length === 0) { cEditor.caret.setToNextBlock(block); return; } /** * Find deepest child node * Iterate child nodes and find LAST DEEPEST node * We need to check caret positon (it must be at the end) * @param focusedNodeIndex is index of childnode by length * @param focusedTextNode is Text node founded by DFS algorithm */ var focusedTextNode = '', focusedNodeIndex = cEditor.caret.focusedNodeIndex + 1; if (focusedNodeHolder.childNodes){ /** Looking from the END of node */ focusedTextNode = cEditor.content.getDeepestTextNodeFromPosition(focusedNodeHolder, focusedNodeHolder.childNodes.length); } /** * Stop transition when caret is not at the end of Text node * When we click "DOWN" or "RIGHT", caret moves to the end of node. * We should check caret position before we transmit/switch the block. */ if ( block.childNodes.length != focusedNodeIndex || focusedTextNode.length != selection.anchorOffset) { return false; } cEditor.caret.setToNextBlock(block); }, /** * LEFT or UP keydowns on block */ blockLeftOrUpArrowPressed : function (block) { var selection = window.getSelection(), focusedNode = selection.anchorNode, focusedNodeHolder; /** Check for caret existance */ if (!focusedNode){ return false; } /** Saving caret after keydown event happend */ cEditor.caret.save(); /** Looking for parent contentEditable block */ while (focusedNode.className != cEditor.ui.BLOCK_CLASSNAME) { focusedNodeHolder = focusedNode.parentNode; focusedNode = focusedNodeHolder; } /** * Find deepest child node * Iterate child nodes and find First DEEPEST node * We need it to check caret positon (it must be at the begining) */ focusedNodeHolder = focusedNodeHolder || focusedNode; if (focusedNodeHolder.childNodes.length !== 0) { var focusedTextNode = ''; if (focusedNodeHolder.childNodes){ /** Looking from the first child */ focusedTextNode = cEditor.content.getDeepestTextNodeFromPosition(focusedNodeHolder, 0); } } /** * When we click "UP" or "LEFT", caret behaviour is as default. * We should check caret position before we transmit/switch the block. */ if ( selection.anchorOffset !== 0) { return false; } /** * We can't switch block till caret is not at the begining of first node and has zero offset */ if ( (cEditor.caret.offset !== 0 || cEditor.caret.focusedNodeIndex !== 0) && focusedNodeHolder.childNodes.length !== 0 ) { return; } cEditor.caret.setToPreviousBlock(block); }, enterPressed: function (block) { var selection = window.getSelection(), currentNode = selection.anchorNode, parentOfFocusedNode = currentNode.parentNode; /** * We add new block with contentEditable property if enter key is pressed. * First we check, if caret is at the end of last node and offset is legth of text node * focusedNodeIndex + 1, because that we compare non-arrays index. */ if ( currentNode.length === cEditor.caret.offset && parentOfFocusedNode.childNodes.length == cEditor.caret.focusedNodeIndex + 1) { /** Prevent
creation */ // event.preventDefault(); /** Create new Block and append it after current */ var newBlock = cEditor.draw.block('p'); newBlock.contentEditable = "true"; newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME); /** Add event listeners (Keydown) for new created block */ cEditor.ui.addBlockHandlers(newBlock); cEditor.core.insertAfter(block, newBlock); /** set focus to the current (created) block */ cEditor.caret.setToNextBlock(block); cEditor.toolbar.move(); } }, backspacePressed: function (block) { if (block.textContent.trim()) return; cEditor.caret.setToPreviousBlock(block); block.remove(); cEditor.toolbar.move(); event.preventDefault(); }, blockPaste: function(event, block) { var clipboardData, pastedData, nodeContent; event.preventDefault(); clipboardData = event.clipboardData || window.clipboardData; pastedData = clipboardData.getData('Text'); nodeContent = document.createTextNode(pastedData); block.appendChild(nodeContent); }, /** * Clicks on block settings button */ showSettingsButtonClicked : function(){ /** * Get type of current block * It uses to append settings from tool.settings property. * ... * Type is stored in data-type attribute on block */ var currentToolType = cEditor.content.currentNode.dataset.type; cEditor.toolbar.settings.toggle(currentToolType); } }; cEditor.content = { currentNode : null, /** * Synchronizes redactor with original textarea */ sync : function () { cEditor.core.log('syncing...'); /** * Save redactor content to cEditor.state */ cEditor.state.html = cEditor.nodes.redactor.innerHTML; /** * Put it to the textarea */ cEditor.nodes.textarea.value = cEditor.state.html; }, getNodeFocused : function() { var selection = window.getSelection(), focused; if (selection.anchorNode != null) { if ( selection.anchorNode.nodeType == cEditor.core.nodeTypes.TAG ) { focused = selection.anchorNode; } else { focused = selection.focusNode.parentElement; } } if ( !cEditor.parser.isFirstLevelBlock(focused) ) { focused = focused.parentElement; } if (focused != cEditor.nodes.redactor){ return focused; } return null; }, /** * Trigger this event when working node changed */ workingNodeChanged : function (setCurrent) { this.currentNode = setCurrent || this.getNodeFocused(); }, /** * Replaces one redactor block with another * @param {Element} targetBlock - block to replace. Mostly currentNode. * @param {Element} newBlock * @param {string} newBlockType - type of new block; we need to store it to data-attribute * * [!] Function does not saves old block content. * You can get it manually and pass with newBlock.innerHTML */ replaceBlock : function function_name(targetBlock, newBlock, newBlockType) { if (!targetBlock || !newBlock || !newBlockType){ cEditor.core.log('replaceBlock: missed params'); return; } /** Add redactor block classname to new block */ newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME); /** Store block type */ newBlock.dataset.type = newBlockType; /** Replacing */ cEditor.nodes.redactor.replaceChild(newBlock, targetBlock); /** * Set new node as current */ cEditor.content.workingNodeChanged(newBlock); /** * Setting caret * @todo is it necessary? */ cEditor.caret.set(newBlock); }, insertBlock : function(newBlock, blockType) { var workingNode = cEditor.content.currentNode; newBlock.classList.add(cEditor.ui.BLOCK_CLASSNAME); newBlock.dataset.type = blockType; /** Content-editable blocks. We can set focus to such blocks and hang listeners */ switch (blockType) { case 'header' : case 'paragraph': case 'quote' : case 'list' : cEditor.ui.addBlockHandlers(newBlock); break; } if (workingNode) { cEditor.core.insertAfter(workingNode, newBlock); } else { /** * If redactor is empty, append as first child */ cEditor.nodes.redactor.appendChild(newBlock); /** * Set new node as current */ cEditor.content.workingNodeChanged(newBlock); } }, /** * @deprecated with replaceBlock() */ switchBlock : function (targetBlock, newBlockTagname) { if (!targetBlock || !newBlockTagname) return; var nodeToReplace; /** * First-level nodes replaces as-is, * otherwise we need to replace parent node */ if (cEditor.parser.isFirstLevelBlock(targetBlock)) { nodeToReplace = targetBlock; } else { nodeToReplace = targetBlock.parentNode; } /** * Make new node with original content */ var nodeCreated = cEditor.draw.block(newBlockTagname, targetBlock.innerHTML); /** Mark node as redactor block */ nodeCreated.contentEditable = "true"; nodeCreated.classList.add(cEditor.ui.BLOCK_CLASSNAME); /** * If it is a first-level node, replace as-is. */ if (cEditor.parser.isFirstLevelBlock(nodeCreated)) { cEditor.nodes.redactor.replaceChild(nodeCreated, nodeToReplace); /** * Set new node as current */ cEditor.content.workingNodeChanged(nodeCreated); /** * Setting caret */ cEditor.caret.set(nodeCreated); /** Add event listeners for created node */ cEditor.ui.addBlockHandlers(nodeCreated); return; } /** * If it is not a first-level node, for example LI or IMG * we need to wrap it in block-tag (

or