🐛 Improved behaviour on text options when not text is selected

frontend/src/app/util/text_editor.cljs

@@ -111,6 +111,16 @@
   [state]
   (impl/cursorToEnd state))
 
+(defn setup-block-styles
+  [state blocks attrs]
+  (if (empty? blocks)
+    state
+    (->> blocks
+         (reduce
+          (fn [state block-key]
+            (impl/updateBlockData state block-key (clj->js attrs)))
+          state))))
+
 (defn apply-block-styles-to-content
   [state blocks]
   (if (empty? blocks)
@@ -130,3 +140,37 @@
 (defn insert-text [state text attrs]
   (let [style (txt/attrs-to-styles attrs)]
     (impl/insertText state text (clj->js attrs) (clj->js style))))
+
+(defn get-style-override [state]
+  (.getInlineStyleOverride state))
+
+(defn set-style-override [state inline-style]
+  (impl/setInlineStyleOverride state inline-style))
+
+(defn content-equals [state other]
+  (.equals (.getCurrentContent state) (.getCurrentContent other)))
+
+(defn selection-equals [state other]
+  (impl/selectionEquals (.getSelection state) (.getSelection other)))
+
+(defn get-content-changes
+  [old-state state]
+  (let [old-blocks (js->clj (.toJS (.getBlockMap (.getCurrentContent ^js old-state)))
+                            :keywordize-keys false)
+        new-blocks (js->clj (.toJS (.getBlockMap (.getCurrentContent ^js state)))
+                            :keywordize-keys false)]
+    (merge
+     (into {}
+           (comp (filter #(contains? new-blocks (first %)))
+                 (map (fn [[bkey bstate]]
+                        [bkey
+                         {:old (get bstate "text")
+                          :new (get-in new-blocks [bkey "text"])}])))
+           old-blocks)
+     (into {}
+           (comp (filter #(not (contains? old-blocks (first %))))
+                 (map (fn [[bkey bstate]]
+                        [bkey
+                         {:old nil
+                          :new (get bstate "text")}])))
+           new-blocks))))

frontend/src/app/util/text_editor_impl.js

@@ -121,15 +121,33 @@ export function updateCurrentBlockData(state, attrs) {
   return EditorState.push(state, content, "change-block-data");
 }
 
+function addStylesToOverride(styles, other) {
+  let result = styles;
+
+  for (let style of other) {
+    const [p, k, v] = style.split("$$$");
+    const prefix = [p, k, ""].join("$$$");
+
+    const curValue = result.find((it) => it.startsWith(prefix))
+    if (curValue) {
+      result = result.remove(curValue);
+    }
+    result = result.add(style);
+  }
+  return result
+}
+
 export function applyInlineStyle(state, styles) {
   const userSelection = state.getSelection();
   let selection = userSelection;
+  let result = state;
 
   if (selection.isCollapsed()) {
-    selection = getSelectAllSelection(state);
+    const currentOverride = state.getCurrentInlineStyle() || new OrderedSet();
+    const styleOverride = addStylesToOverride(currentOverride, styles)
+    return EditorState.setInlineStyleOverride(state, styleOverride);
   }
 
-  let result = state;
   let content = null;
 
   for (let style of styles) {
@@ -300,6 +318,7 @@ export function getBlockData(state, blockKey) {
 
 export function updateBlockData(state, blockKey, data) {
   const userSelection = state.getSelection();
+  const inlineStyleOverride = state.getInlineStyleOverride();
   const content = state.getCurrentContent();
   const block = content.getBlockForKey(blockKey);
   const newBlock = mergeBlockData(block, data);
@@ -312,8 +331,10 @@ export function updateBlockData(state, blockKey, data) {
     blockData
   );
 
-  const result = EditorState.push(state, newContent, 'change-block-data');
-  return EditorState.acceptSelection(result, userSelection);
+  let result = EditorState.push(state, newContent, 'change-block-data');
+  result = EditorState.acceptSelection(result, userSelection);
+  result = EditorState.setInlineStyleOverride(result, inlineStyleOverride);
+  return result;
 }
 
 export function getSelection(state) {
@@ -376,3 +397,15 @@ export function insertText(state, text, attrs, inlineStyles) {
   const resultSelection = SelectionState.createEmpty(selection.getStartKey());
   return EditorState.push(state, newContent, 'insert-fragment');
 }
+
+export function setInlineStyleOverride(state, inlineStyles) {
+  return EditorState.setInlineStyleOverride(state, inlineStyles);
+}
+
+export function selectionEquals(selection, other) {
+  return selection.getAnchorKey() === other.getAnchorKey() &&
+    selection.getAnchorOffset() === other.getAnchorOffset() &&
+    selection.getFocusKey() === other.getFocusKey() &&
+    selection.getFocusOffset() === other.getFocusOffset() &&
+    selection.getIsBackward() === other.getIsBackward();
+}