@seafile/seafile-editor 0.4.7 → 1.0.0

package/src/extension/plugins/table/render-elem/context-menu.js

@@ -0,0 +1,78 @@
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import { insertColumn, insertRow, removeColumn, removeRow } from '../table-operations';
+import { INSERT_POSITION } from '../../../constants';
+
+const ContextMenu = ({ position, editor, handleCloseContextMenu }) => {
+  const [contextMenuStyle, setContextMenuStyle] = useState({});
+  const contextMenuRef = useRef(null);
+  const { t } = useTranslation();
+
+  useLayoutEffect(() => {
+    generateContextMenuStyle(position);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [position]);
+
+  const generateContextMenuStyle = useCallback((position) => {
+    const menuHeight = contextMenuRef.current.offsetHeight;
+    // get height of context menu when the menu is drawing completed in this page
+    menuHeight === 0 && requestAnimationFrame(generateContextMenuStyle);
+    const documentHeight = document.body.clientHeight;
+    const isContextMenuOutOfScreen = position.top + menuHeight > documentHeight;
+    let top = isContextMenuOutOfScreen ? documentHeight - menuHeight - 5 : position.top;
+    const left = position.left + 3;
+    setContextMenuStyle({ top, left, zIndex: '1071', display: 'block' });
+  }, []);
+
+  const handleClickOperationBtn = (callback, ...arg) => {
+    callback && callback(editor, ...arg);
+    handleCloseContextMenu();
+  };
+
+  return (
+    <div onClick={() => handleCloseContextMenu} contentEditable={false} style={contextMenuStyle} ref={contextMenuRef} className={'sf-context-menu sf-dropdown-list'} >
+      <button
+        onClickCapture={() => handleClickOperationBtn(insertRow, INSERT_POSITION.BEFORE)}
+        className={'sf-context-menu-item sf-dropdown-menu-item'}>
+        {t('Insert_row_before')}
+      </button>
+      <button
+        onClick={() => handleClickOperationBtn(insertRow)}
+        className={'sf-context-menu-item sf-dropdown-menu-item'}>
+        {t('Insert_row_after')}
+      </button>
+      <button
+        onClick={() => handleClickOperationBtn(insertColumn, INSERT_POSITION.BEFORE)}
+        className={'sf-context-menu-item sf-dropdown-menu-item'}>
+        {t('Insert_column_before')}
+      </button>
+      <button
+        onClick={() => handleClickOperationBtn(insertColumn, INSERT_POSITION.AFTER)}
+        className={'sf-context-menu-item sf-dropdown-menu-item'}>
+        {t('Insert_column_after')}
+      </button>
+      <div className={'sf-divider dropdown-divider'}></div>
+      <button
+        onClick={() => handleClickOperationBtn(removeRow)}
+        className={'sf-context-menu-item sf-dropdown-menu-item'}>
+        {t('Remove_row')}
+      </button>
+      <button
+        onClick={() => handleClickOperationBtn(removeColumn)}
+        className={'sf-context-menu-item sf-dropdown-menu-item'}>
+        {t('Remove_column')}
+      </button>
+    </div>
+  );
+};
+
+ContextMenu.propTypes = {
+  editor: PropTypes.object.isRequired,
+  position: PropTypes.shape({
+    top: PropTypes.number.isRequired,
+    left: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default ContextMenu;

package/src/extension/plugins/table/render-elem/index.js

@@ -0,0 +1,157 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useReadOnly } from 'slate-react';
+import { TEXT_ALIGN } from '../../../constants';
+import { TABLE_BODY_NODE_NAME, TABLE_CELL_NODE_NAME, TABLE_ROW_NODE_NAME } from '../constant';
+import ContextMenu from './context-menu';
+
+import './style.css';
+
+const RenderTableContainer = ({ attributes, children, element }, editor) => {
+  const tableRef = useRef(null);
+  const startGridRef = useRef({ rowIndex: -1, colIndex: -1 });
+  const [, setSelectGridRange] = useState({ startRowIndex: -1, startColIndex: -1, endRowIndex: -1, endColIndex: -1 });
+  const [isShowContextMenu, setIsShowContextMenu] = useState(false);
+  const [contextMenuPosition, setContextMenuPosition] = useState({ top: 0, left: 0 });
+  const isReadonly = useReadOnly();
+
+  useEffect(() => {
+    if (isReadonly) return null;
+    clearSelectedCells();
+    document.addEventListener('contextmenu', handleContextMenu);
+    return () => {
+      document.removeEventListener('contextmenu', handleContextMenu);
+      document.removeEventListener('mousedown', unregisterEventHandler);
+      document.removeEventListener('keyup', unregisterEventHandler);
+      document.removeEventListener('keyup', clearSelectedCells);
+      document.removeEventListener('mousedown', clearSelectedCells);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const getTableElement = useCallback((node, type) => {
+    let target = node;
+    if (target.nodeName.toLowerCase() === type) return target;
+    while (target.nodeName.toLowerCase() !== type) {
+      target = target.parentNode;
+    }
+    return target;
+  }, []);
+
+  const clearSelectedCells = useCallback((e) => {
+    isShowContextMenu && handleCloseContextMenu();
+    tableRef.current.querySelectorAll('.selected-cell')
+      .forEach(selectedCell => {
+        selectedCell.classList.remove(
+          'selected-cell',
+          'selected-cell-left',
+          'selected-cell-bottom',
+          'selected-cell-top',
+          'selected-cell-right'
+        );
+      });
+    document.removeEventListener('keyup', clearSelectedCells);
+    document.removeEventListener('click', clearSelectedCells);
+  }, [isShowContextMenu]);
+
+  const updateSelectedCellStyles = useCallback((startRowIndex, endRowIndex, startColIndex, endColIndex,) => {
+    clearSelectedCells();
+    if (startColIndex < 0 || startRowIndex < 0) return;
+    for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
+      let currentRow = tableRef.current.querySelectorAll(TABLE_ROW_NODE_NAME)[rowIndex];
+      for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
+        const selectedCell = currentRow.querySelectorAll(TABLE_CELL_NODE_NAME)[colIndex];
+        selectedCell.classList.add('selected-cell');
+        // Set selected cell border
+        rowIndex === startRowIndex && selectedCell.classList.add('selected-cell-top');
+        colIndex === startColIndex && selectedCell.classList.add('selected-cell-left');
+        colIndex === endColIndex && selectedCell.classList.add('selected-cell-right');
+        rowIndex === endRowIndex && selectedCell.classList.add('selected-cell-bottom');
+      }
+    }
+    setSelectGridRange({ startRowIndex, endRowIndex, startColIndex, endColIndex, });
+  }, [clearSelectedCells]);
+
+  const selectCellsInTable = useCallback((e) => {
+    // Check if the target is in the table
+    if (e.target.nodeName.toLowerCase() === TABLE_BODY_NODE_NAME || !tableRef.current.contains(e.target)) return;
+    // Figure out select range
+    const { startRowIndex, startColIndex } = startGridRef.current;
+    const endRowIndex = getTableElement(e.target, TABLE_ROW_NODE_NAME).rowIndex;
+    const endColIndex = getTableElement(e.target, TABLE_CELL_NODE_NAME).cellIndex;
+    const minRowIndex = Math.min(startRowIndex, endRowIndex);
+    const maxRowIndex = Math.max(startRowIndex, endRowIndex);
+    const minColIndex = Math.min(startColIndex, endColIndex);
+    const maxColIndex = Math.max(startColIndex, endColIndex);
+    // Select one cell
+    if (minRowIndex === maxRowIndex && minColIndex === maxColIndex) return;
+    // collapse selection
+    window.getSelection().collapseToEnd();
+    updateSelectedCellStyles(minRowIndex, maxRowIndex, minColIndex, maxColIndex);
+  }, [getTableElement, updateSelectedCellStyles]);
+
+  const handleMouseUp = useCallback((e) => {
+    document.removeEventListener('mousemove', selectCellsInTable);
+    document.removeEventListener('mouseup', handleMouseUp);
+    document.addEventListener('keyup', clearSelectedCells);
+    document.addEventListener('mousedown', clearSelectedCells);
+  }, [clearSelectedCells, selectCellsInTable]);
+
+  const handleMouseDown = useCallback((e) => {
+    // Clear last rendered styles
+    clearSelectedCells();
+    // Set new select range
+    const startRowIndex = getTableElement(e.target, TABLE_ROW_NODE_NAME).rowIndex;
+    const startColIndex = getTableElement(e.target, TABLE_CELL_NODE_NAME).cellIndex;
+    startGridRef.current = { startRowIndex: startRowIndex, startColIndex: startColIndex };
+    document.addEventListener('mousemove', selectCellsInTable);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [clearSelectedCells, getTableElement, handleMouseUp, selectCellsInTable]);
+
+  const handleContextMenu = useCallback((e) => {
+    if (!tableRef.current.contains(e.target)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const { x, y } = tableRef.current.getBoundingClientRect();
+    setContextMenuPosition({ top: e.clientY - y, left: e.clientX - x });
+    setIsShowContextMenu(true);
+    document.addEventListener('mousedown', unregisterEventHandler);
+    document.addEventListener('keyup', unregisterEventHandler);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const unregisterEventHandler = useCallback(() => {
+    document.removeEventListener('mousedown', handleContextMenu);
+  }, [handleContextMenu]);
+
+  const handleCloseContextMenu = () => {
+    setIsShowContextMenu(false);
+  };
+
+  return (
+    <div style={{ position: 'relative' }} >
+      <table ref={tableRef} onMouseDown={handleMouseDown} className='sf-table-container'>
+        <tbody {...attributes}>
+          {children}
+        </tbody>
+      </table>
+      {isShowContextMenu && <ContextMenu handleCloseContextMenu={handleCloseContextMenu} position={contextMenuPosition} editor={editor} />}
+    </div>
+  );
+};
+
+export default RenderTableContainer;
+
+export const RenderTableRow = ({ attributes, children, element }) => {
+  return (
+    <tr {...attributes}>{children}</tr>
+  );
+};
+
+export const RenderTableCell = ({ attributes, children, element }) => {
+  const { align = TEXT_ALIGN.LEFT } = element;
+  return (
+    <td data-root='true' style={{ textAlign: align }} {...attributes}>
+      {children}
+    </td>
+  );
+};

package/src/extension/plugins/table/render-elem/style.css

@@ -0,0 +1,94 @@
+.sf-table-container td {
+  position: relative;
+}
+
+.sf-table-container .selected-cell {
+  caret-color: transparent;
+  background-color: #fff4e6;
+}
+
+.sf-table-container .selected-cell-top:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: -1px;
+  border-top: 1px double #ffa94d;
+  z-index: 2;
+}
+
+.sf-table-container .selected-cell-bottom:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: -1px;
+  border-bottom: 1px double #ffa94d;
+  z-index: 2;
+}
+
+.sf-table-container .selected-cell-left:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: -1px;
+  border-left: 1px double #ffa94d;
+  z-index: 2;
+}
+
+.sf-table-container .selected-cell-right:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  margin: -1px;
+  border-right: 1px double #ffa94d;
+  z-index: 2;
+}
+
+.sf-context-menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  /* float: left; */
+  z-index: 1000;
+  flex-direction: column;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  background-color: #fff;
+}
+
+.sf-context-menu .sf-context-menu-item {
+  display: flex;
+  clear: both;
+  padding: 0.25rem 1.5rem;
+  border: none;
+  white-space: nowrap;
+  color: #212529;
+  background-color: #fff;
+}
+
+.sf-context-menu .sf-context-menu-item:hover,
+.sf-context-menu .sf-context-menu-item:focus {
+  color: #16181b;
+  text-decoration: none;
+  background-color: #f8f9fa;
+}
+
+.sf-context-menu .sf-divider {
+  width: 100%;
+  height: 1px;
+  margin: 5px 0;
+  color: #eee;
+  cursor: default;
+}

package/src/extension/plugins/table/table-operations.js

@@ -0,0 +1,162 @@
+import { Editor, Transforms } from 'slate';
+import { INSERT_POSITION } from '../../constants';
+import { getSelectGrid, getTableEntry, getTableFocusingInfos } from './helper';
+import { generateTableCell, generateTableRow } from './model';
+import { focusEditor } from '../../core';
+
+/**
+ * @param {Object} editor
+ * @param {INSERT_POSITION.AFTER | INSERT_POSITION.BEFORE} insertPosition by default is INSERT_POSITION.AFTER
+ */
+const insertRow = (editor, position = INSERT_POSITION.AFTER) => {
+  const {
+    tableEntry: [, tablePath],
+    rowEntry: [rowNode],
+    rowIndex,
+  } = getTableFocusingInfos(editor);
+
+  const getInsertPath = (rowIndex) => {
+    const handlePosition = {
+      [INSERT_POSITION.BEFORE]: (rowIndex) => tablePath.concat(rowIndex),
+      [INSERT_POSITION.AFTER]: (rowIndex) => tablePath.concat(rowIndex + 1),
+    };
+    return handlePosition[position](rowIndex);
+  };
+
+  const insertPath = getInsertPath(rowIndex);
+  const insertRowChildren = rowNode.children.map(({ align }) => generateTableCell({ align }));
+  const insertRow = generateTableRow({ childrenOrText: insertRowChildren });
+  Transforms.insertNodes(editor, insertRow, { at: insertPath });
+};
+
+const removeRow = (editor) => {
+  const {
+    tableEntry: [tableNode, tablePath],
+    rowEntry: [, rowPath],
+    rowIndex,
+  } = getTableFocusingInfos(editor);
+
+  let focusPoint = null;
+  const tableHeight = tableNode.children.length;
+  // If table has one more row, remove row, else remove table
+  if (tableHeight > 1) {
+    // If removing row is the last row, focus on the previous row
+    const isRemovingLastRow = rowIndex === tableHeight - 1;
+
+    focusPoint = isRemovingLastRow
+      ? Editor.start(editor, tablePath.concat(rowIndex - 1))
+      : Editor.start(editor, rowPath);
+
+    Transforms.removeNodes(editor, { at: rowPath });
+    focusEditor(editor, focusPoint);
+  } else {
+    removeTable(editor);
+  }
+};
+
+const removeTable = (editor) => {
+  const [tableNodeEntry] = getTableEntry(editor);
+  if (!tableNodeEntry) return;
+
+  const [, tablePath] = tableNodeEntry;
+  const previousNodeEntry = Editor.previous(editor, { at: tablePath });
+  const focusPoint = Editor.end(editor, previousNodeEntry[1]);
+  Transforms.removeNodes(editor, { at: tablePath });
+  focusEditor(editor, focusPoint);
+};
+
+/**
+ * @param {Object} editor
+ * @param {INSERT_POSITION.AFTER | INSERT_POSITION.BEFORE} insertPosition by default is INSERT_POSITION.AFTER
+ */
+const insertColumn = (editor, insertPosition = INSERT_POSITION.AFTER) => {
+  const {
+    tableEntry: [tableNode, tablePath],
+    rowIndex,
+    columnIndex,
+  } = getTableFocusingInfos(editor);
+
+  const getInsertPath = (rowIndex, columnIndex) => {
+    const newCellPath = {
+      [INSERT_POSITION.BEFORE]: (rowIndex, columnIndex) => tablePath.concat(rowIndex, columnIndex),
+      [INSERT_POSITION.AFTER]: (rowIndex, columnIndex) => tablePath.concat(rowIndex, columnIndex + 1),
+    };
+    return newCellPath[insertPosition](rowIndex, columnIndex);
+  };
+
+  tableNode.children.forEach((row, rowIndex) => {
+    const insertPath = getInsertPath(rowIndex, columnIndex);
+    const newCell = generateTableCell(rowIndex, columnIndex);
+    Transforms.insertNodes(editor, newCell, { at: insertPath });
+  });
+
+  const focusPoint = Editor.start(editor, getInsertPath(rowIndex, columnIndex));
+  focusEditor(editor, focusPoint);
+};
+
+const removeColumn = (editor) => {
+  const {
+    tableEntry: [tableNode, tablePath],
+    rowEntry: [rowNode, rowPath],
+    columnIndex,
+  } = getTableFocusingInfos(editor);
+
+  const tableWidth = rowNode.children.length;
+  let focusPoint = null;
+
+  // If table has one more column, remove column, else remove table
+  if (tableWidth > 1) {
+    // If removing column is the last column, focus on the previous column
+    const isRemovingLastColumn = columnIndex === tableWidth - 1;
+
+    tableNode.children.forEach((row, rowIndex) => {
+      const removePath = tablePath.concat(rowIndex, columnIndex);
+      Transforms.removeNodes(editor, { at: removePath });
+    });
+
+    focusPoint = isRemovingLastColumn
+      ? Editor.start(editor, rowPath.concat(columnIndex - 1))
+      : Editor.start(editor, rowPath.concat(columnIndex));
+
+    focusEditor(editor, focusPoint);
+  } else {
+    removeTable(editor);
+  }
+};
+
+/**
+ * @param {Object} editor
+ * @param {keyof TEXT_ALIGN} align Text align
+ */
+const changeCellAlign = (editor, align) => {
+  const {
+    tableEntry: [, tablePath],
+    columnIndex,
+    rowIndex,
+  } = getTableFocusingInfos(editor);
+  const selectGrid = getSelectGrid(editor);
+
+  // If select a range in table
+  if (selectGrid) {
+    const { startRowIndex, endRowIndex, startColIndex, endColIndex } = selectGrid;
+    for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
+      for (let columnIndex = startColIndex; columnIndex <= endColIndex; columnIndex++) {
+        const cellPath = tablePath.concat(rowIndex, columnIndex);
+        Transforms.setNodes(editor, { align }, { at: cellPath });
+      }
+    }
+  } else {
+    // If select a cell in table
+    const cellPath = tablePath.concat(rowIndex, columnIndex);
+    Transforms.setNodes(editor, { align }, { at: cellPath });
+  }
+};
+
+export {
+  insertRow,
+  removeRow,
+  removeTable,
+  insertColumn,
+  removeColumn,
+  changeCellAlign
+};

package/src/extension/plugins/text-style/helpers.js

@@ -0,0 +1,38 @@
+import { Editor } from 'slate';
+import { isInCodeBlock } from '../code-block/helpers';
+
+export const isMenuDisabled = (editor, isReadonly) => {
+  if (isReadonly) return true;
+  const { selection } = editor;
+  if (!selection) return true;
+  if (isInCodeBlock(editor)) return true;
+  return false;
+};
+
+export const isMarkActive = (editor, mark) => {
+  const marks = Editor.marks(editor);
+
+  // If curMarks exists, you need to set this parameter manually. curMarks prevails
+  if (marks && Object.keys(marks).length > 0) {
+    return !!marks[mark];
+  } else {
+    const [match] = Editor.nodes(editor, {
+      match: n => n[mark] === true,
+    });
+
+    return !!match;
+  }
+};
+
+export const addMark = (editor, type) => {
+  Editor.addMark(editor, type, true);
+};
+
+export const removeMark = (editor, type) => {
+  Editor.removeMark(editor, type);
+};
+
+export const toggleTextStyle = (editor, type) => {
+  const isActive = isMarkActive(editor, type);
+  isActive ? removeMark(editor, type) : addMark(editor, type);
+};

package/src/extension/plugins/text-style/index.js

@@ -0,0 +1,12 @@
+import TextStyleMenu from './menu';
+import withTextStyle from './plugin';
+import renderText from './render-elem';
+
+const TextPlugin = {
+  type: 'text',
+  editorMenus: [TextStyleMenu],
+  editorPlugin: withTextStyle,
+  renderElements: [renderText]
+};
+
+export default TextPlugin;

package/src/extension/plugins/text-style/menu/index.js

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { MENUS_CONFIG_MAP, TEXT_STYLE_MAP } from '../../../constants';
+import MenuItem from '../../../commons/menu/menu-item';
+import { isMenuDisabled, isMarkActive, toggleTextStyle } from '../helpers';
+
+const textStyleList = [TEXT_STYLE_MAP.ITALIC, TEXT_STYLE_MAP.BOLD, TEXT_STYLE_MAP.CODE];
+
+const TextStyleMenu = ({ editor, readonly, type, isRichEditor, className }) => {
+  const config = MENUS_CONFIG_MAP[type];
+  const isDisabled = isMenuDisabled(editor, readonly);
+  const isActive = isMarkActive(editor, type);
+
+  const handleClickMenu = useCallback((e, toggleType) => {
+    toggleTextStyle(editor, type);
+  }, [editor, type]);
+
+  return (
+    <div>
+      <MenuItem
+        editor={editor}
+        disabled={isDisabled}
+        isActive={isActive}
+        isRichEditor={isRichEditor}
+        className={className}
+        onMouseDown={handleClickMenu}
+        {...config}
+      />
+    </div>
+  );
+};
+
+TextStyleMenu.propTypes = {
+  editor: PropTypes.object.isRequired,
+  readonly: PropTypes.bool.isRequired,
+  type: PropTypes.oneOf(textStyleList).isRequired,
+  isRichEditor: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default TextStyleMenu;

package/src/extension/plugins/text-style/plugin.js

@@ -0,0 +1,37 @@
+import isHotkey from 'is-hotkey';
+import { TEXT_STYLE_MAP } from '../../constants';
+import { isMenuDisabled, toggleTextStyle } from './helpers';
+
+const withTextStyle = (editor) => {
+  const { onHotKeyDown } = editor;
+  const newEditor = editor;
+
+  newEditor.onHotKeyDown = (event) => {
+
+    // Does not meet text hotkey processing conditions
+    if (!isHotkey('mod+b', event) && !isHotkey('mod+i', event)) {
+      return onHotKeyDown && onHotKeyDown(event);
+    }
+
+    // handled by text hotkey
+    if (isMenuDisabled(newEditor)) {
+      return true;
+    }
+
+    if (isHotkey('mod+b', event)) {
+      toggleTextStyle(newEditor, TEXT_STYLE_MAP.BOLD);
+      return true;
+    }
+
+    if (isHotkey('mod+i', event)) {
+      toggleTextStyle(newEditor, TEXT_STYLE_MAP.ITALIC);
+      return true;
+    }
+
+    return false;
+  };
+
+  return newEditor;
+};
+
+export default withTextStyle;

package/src/extension/plugins/text-style/render-elem.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { TEXT_STYLE_MAP } from '../../constants';
+
+const renderText = (props, editor) => {
+  const { attributes, children, leaf } = props;
+  const { text, ...rest } = leaf;
+
+  let markedChildren = React.cloneElement(children);
+
+  if (leaf[TEXT_STYLE_MAP.BOLD]) {
+    markedChildren = <strong>{markedChildren}</strong>;
+  }
+
+  if (leaf[TEXT_STYLE_MAP.ITALIC]) {
+    markedChildren = <i>{markedChildren}</i>;
+  }
+
+  if (leaf[TEXT_STYLE_MAP.UNDERLINE]) {
+    markedChildren = <span style={{ textDecoration: 'underline' }}>{markedChildren}</span>;
+  }
+
+  if (leaf[TEXT_STYLE_MAP.CODE]) {
+    markedChildren = <code>{markedChildren}</code>;
+  }
+
+  if (leaf[TEXT_STYLE_MAP.DELETE]) {
+    markedChildren = <del>{markedChildren}</del>;
+  }
+
+  if (leaf[TEXT_STYLE_MAP.ADD]) {
+    markedChildren = <span>{markedChildren}</span>;
+  }
+
+  if (leaf.decoration) {
+    markedChildren = <span className={`token ${leaf.type}`}>{markedChildren}</span>;
+  }
+
+  return (
+    <span data-id={leaf.id} {...attributes} className={Object.keys(rest).join(' ')}>
+      {markedChildren}
+    </span>
+  );
+};
+
+export default renderText;