Started using the Slate marks system correctly

so that the splitting of Text nodes is done well when applying style marks for formatting (marks that have keys beginning with 'style-').
eea · Sep 1, 2020 · 5103226 · 5103226
1 parent 9881de4
commit 5103226
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 44 deletions.
diff --git a/src/editor/render.jsx b/src/editor/render.jsx
@@ -30,9 +30,13 @@ export const Leaf = ({ children, ...rest }) => {
     [`highlight-${leaf.highlightType}`]: mode !== 'view' && leaf.highlight,
     'highlight-selection': mode !== 'view' && leaf.isSelection,
   };
-  if (leaf.styleName) {
-    obj[leaf.styleName] = true;
+
+  for (const prop in leaf) {
+    if (prop.startsWith('style-')) {
+      obj[prop.substring(6)] = true;
+    }
   }
+
   const klass = cx(obj);
 
   return mode === 'view' ? (
@@ -44,25 +48,17 @@ export const Leaf = ({ children, ...rest }) => {
             {children.indexOf('\n') > -1 &&
             children.split('\n').length - 1 > i ? (
               <>
-                {leaf.styleName ? (
-                  <span className={leaf.styleName}>{t}</span>
-                ) : (
-                  t
-                )}
+                {<span className={klass}>{t}</span>}
                 <br />
               </>
-            ) : leaf.styleName ? (
-              <span className={leaf.styleName}>{t}</span>
             ) : (
-              t
+              <span className={klass}>{t}</span>
             )}
           </React.Fragment>
         );
       })
-    ) : leaf.styleName ? (
-      <span className={leaf.styleName}>{children}</span>
     ) : (
-      children
+      <span className={klass}>{children}</span>
     )
   ) : (
     <span {...attributes} className={klass}>

diff --git a/src/utils/blocks.js b/src/utils/blocks.js
@@ -1,4 +1,4 @@
-import { Editor, Transforms } from 'slate';
+import { Editor, Transforms, Range, RangeRef } from 'slate';
 import { settings } from '~/config';
 import { deconstructToVoltoBlocks } from 'volto-slate/utils';
 
@@ -37,11 +37,8 @@ export const isBlockStyleActive = (editor, style) => {
 
 export const isInlineStyleActive = (editor, style) => {
   const m = Editor.marks(editor);
-  if (
-    m &&
-    m.styleName &&
-    m.styleName.split(' ').filter((x) => x === style).length > 0
-  ) {
+  const keyName = `style-${style}`;
+  if (m && m[keyName]) {
     return true;
   }
   return false;
@@ -257,33 +254,36 @@ export const toggleInlineStyle = (editor, style) => {
 };
 
 function toggleInlineStyleInSelection(editor, style) {
+  // Editor.withoutNormalizing(editor, () => {
+  //   const selEdges = Range.edges(editor.selection);
+  //   debugger;
+
+  //   const ref = Editor.rangeRef(editor, editor.selection, {
+  //     affinity: 'inward',
+  //   });
+
+  //   Transforms.splitNodes(editor, {
+  //     mode: 'lowest',
+  //     at: selEdges[0],
+  //     height: 2, // TODO: is this a bad value for some cases?
+  //   });
+  //   Transforms.splitNodes(editor, {
+  //     mode: 'lowest',
+  //     at: selEdges[1],
+  //     height: 2, // TODO: see above comment.
+  //   });
+
+  //   Transforms.select(editor, ref.current);
+  // });
+
   const m = Editor.marks(editor);
-  if (
-    m &&
-    m.styleName &&
-    m.styleName.split(' ').filter((x) => x === style).length > 0
-  ) {
-    // remove the style
-    Editor.addMark(
-      editor,
-      'styleName',
-      m.styleName
-        .split(' ')
-        .filter((x) => x !== style)
-        .join(' '),
-    );
-    return;
+  const keyName = 'style-' + style;
+
+  if (m && m[keyName]) {
+    Editor.removeMark(editor, keyName);
+  } else {
+    Editor.addMark(editor, keyName, true);
   }
-  // add a new style
-  Editor.addMark(
-    editor,
-    'styleName',
-    m && m.styleName
-      ? m.styleName + ' ' + style
-      : m && !m.styleName
-      ? style
-      : '',
-  );
 }
 
 function toggleBlockStyleInSelection(editor, style) {