Add optional support for showing typographic characters

CHANGELOG.rst

@@ -6,6 +6,7 @@ Next version
 
 - Updated all dependencies.
 - Stopped putting anything into the global scope in ``init.js``.
+- Added optional support for showing typographic characters.
 
 
 0.4 (2024-05-26)

README.rst

@@ -85,9 +85,10 @@ It's possible to slightly customize the field or widget by passing an optional
 .. code-block:: python
 
     config = {
-        "types": None,    # Allow all nodes and marks
-        "history": True,  # Enable undo and redo
-        "html": True,     # Add a button which allows editing the raw HTML
+        "types": None,        # Allow all nodes and marks
+        "history": True,      # Enable undo and redo
+        "html": True,         # Add a button which allows editing the raw HTML
+        "typographic": False, # Do not highlight typographic characters
     }
 
 If you only want to support paragraphs, strong, emphasis, sub- and superset and

django_prose_editor/widgets.py

@@ -28,6 +28,7 @@ def get_context(self, name, value, attrs):
                 "types": None,
                 "history": True,
                 "html": True,
+                "typograpic": False,
             },
             separators=(",", ":"),
         )

src/editor.css

@@ -123,3 +123,7 @@
 label:empty:has(+ .prose-editor) {
   display: none;
 }
+
+.prose-editor-nbsp {
+  background: lightblue;
+}

src/editor.js

@@ -25,6 +25,7 @@ import {
   htmlMenuItem,
 } from "./menu.js"
 import { noSpellCheck } from "./nospellcheck.js"
+import { typographicPlugin } from "./typographic.js"
 import { crel, createDebouncedBackWriter, parseHTML } from "./utils.js"
 
 const underlineDOM = ["u", 0]
@@ -118,7 +119,8 @@ export function createEditor(textarea, config) {
       ].filter(Boolean),
     ),
     noSpellCheck(),
-  ]
+    config.typograpic ? typographicPlugin : null,
+  ].filter(Boolean)
 
   const editor = crel("div", { className: "prose-editor" })
   textarea.before(editor)

src/typographic.js

@@ -0,0 +1,39 @@
+// Plugin which shows typographic characters (currently only non-breaking spaces)
+
+import { Plugin } from "prosemirror-state"
+import { Decoration, DecorationSet } from "prosemirror-view"
+
+const typographicDecorations = (doc) => {
+  const decorations = []
+  doc.descendants((node, position) => {
+    if (node.text) {
+      for (const match of node.text.matchAll(/\u00A0/g)) {
+        const from = position + (match.index || 0)
+        decorations.push(
+          Decoration.inline(from, from + 1, {
+            class: "prose-editor-nbsp",
+          }),
+        )
+      }
+    }
+  })
+  return DecorationSet.create(doc, decorations)
+}
+
+export const typographicPlugin = new Plugin({
+  state: {
+    init(_, { doc }) {
+      return typographicDecorations(doc)
+    },
+    apply(tr, set) {
+      // return set.map(tr.mapping, tr.doc)
+      // I fear that's not very performant. Maybe improve this "later".
+      return tr.docChanged ? typographicDecorations(tr.doc) : set
+    },
+  },
+  props: {
+    decorations(state) {
+      return typographicPlugin.getState(state)
+    },
+  },
+})