on pressing enter key - formatting reset issue -> resolved

package.json

@@ -8,6 +8,7 @@
   "config": {
     "ports": {
       "webpack": "9080",
+      "tessellation": "9200",
       "website": "9000"
     }
   },
@@ -26,9 +27,10 @@
     "build": "run-p build:*",
     "build:quill": "npm run build -w quill",
     "build:website": "npm run build -w website",
-    "start": "run-p start:*",
+    "start": "[ -z \"$npm_package_config_ports_webpack\" ] && webpack-dev-server || webpack-dev-server --port $npm_package_config_ports_webpack",
     "start:quill": "npm start -w quill",
     "start:website": "NEXT_PUBLIC_LOCAL_QUILL=true npm start -w website",
+    "build:tessellation" : "npm run build -w quill && npx webpack --config webpack.config.js",
     "lint": "npm run lint -ws"
   },
   "keywords": [
@@ -46,6 +48,7 @@
   "engineStrict": true,
   "devDependencies": {
     "execa": "^9.0.2",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "webpack-cli": "^5.1.4"
   }
 }

packages/quill/src/modules/keyboard.ts

@@ -172,24 +172,16 @@ class Keyboard extends Module<KeyboardOptions> {
 
   listen() {
     this.quill.root.addEventListener('keydown', (evt) => {
-      if (evt.defaultPrevented || evt.isComposing) return;
+      if (evt.defaultPrevented) return;
 
-      // evt.isComposing is false when pressing Enter/Backspace when composing in Safari
-      // https://bugs.webkit.org/show_bug.cgi?id=165004
-      const isComposing =
-        evt.keyCode === 229 && (evt.key === 'Enter' || evt.key === 'Backspace');
+      const isComposing = evt.which || evt.keyCode;
       if (isComposing) return;
+      console.log('iscomposing :>> ', isComposing);
+      const bindings = (this.bindings[isComposing] || []).filter((binding) => {
+        return Keyboard.match(evt, binding);
+      });
 
-      const bindings = (this.bindings[evt.key] || []).concat(
-        this.bindings[evt.which] || [],
-      );
-      const matches = bindings.filter((binding) =>
-        Keyboard.match(evt, binding),
-      );
-      if (matches.length === 0) return;
-      // @ts-expect-error
-      const blot = Quill.find(evt.target, true);
-      if (blot && blot.scroll !== this.quill.scroll) return;
+      if (bindings.length === 0) return;
       const range = this.quill.getSelection();
       if (range == null || !this.quill.hasFocus()) return;
       const [line, offset] = this.quill.getLine(range.index);
@@ -215,7 +207,7 @@ class Keyboard extends Module<KeyboardOptions> {
         suffix: suffixText,
         event: evt,
       };
-      const prevented = matches.some((binding) => {
+      const prevented = bindings.some((binding) => {
         if (
           binding.collapsed != null &&
           binding.collapsed !== curContext.collapsed
@@ -229,12 +221,10 @@ class Keyboard extends Module<KeyboardOptions> {
           return false;
         }
         if (Array.isArray(binding.format)) {
-          // any format is present
           if (binding.format.every((name) => curContext.format[name] == null)) {
             return false;
           }
         } else if (typeof binding.format === 'object') {
-          // all formats must match
           if (
             !Object.keys(binding.format).every((name) => {
               // @ts-expect-error Fix me later
@@ -332,6 +322,9 @@ class Keyboard extends Module<KeyboardOptions> {
   }
 
   handleEnter(range: Range, context: Context) {
+    if (range.length > 0) {
+      this.quill.scroll.deleteAt(range.index, range.length); // So we do not trigger text-change
+    }
     const lineFormats = Object.keys(context.format).reduce(
       (formats: Record<string, unknown>, format) => {
         if (
@@ -344,13 +337,15 @@ class Keyboard extends Module<KeyboardOptions> {
       },
       {},
     );
-    const delta = new Delta()
-      .retain(range.index)
-      .delete(range.length)
-      .insert('\n', lineFormats);
-    this.quill.updateContents(delta, Quill.sources.USER);
+    this.quill.insertText(range.index, '\n', lineFormats, Quill.sources.USER);
     this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
     this.quill.focus();
+    Object.keys(context.format).forEach((name) => {
+      if (lineFormats[name] != null) return;
+      if (Array.isArray(context.format[name])) return;
+      if (name === 'code' || name === 'link') return;
+      this.quill.format(name, context.format[name], Quill.sources.USER);
+    });
   }
 }
 

packages/tessellation/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

packages/tessellation/index.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quill Editor Example</title>
+    <link href="./quill.core.css" rel="stylesheet" />
+    <link href="./quill.snow.css" rel="stylesheet" />
+  </head>
+  <style>
+    .ql-container {
+      box-sizing: border-box;
+      font-family: Helvetica, Arial, sans-serif;
+      /* font-size: 13px; */
+      font-size: 12px;
+      height: 100%;
+      margin: 0px;
+      position: relative;
+    }
+
+    .ql-editor .ql-size-small {
+      /* font-size: 0.75em; */
+      font-size: 10px;
+    }
+
+    .ql-editor .ql-size-large {
+      /* font-size: 1.5em; */
+      font-size: 14px;
+    }
+
+    .ql-editor .ql-size-huge {
+      /* font-size: 2.5em; */
+      font-size: 16px;
+    }
+
+    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
+    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
+      /* content: 'Normal'; */
+      content: '12px';
+    }
+
+    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
+    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+      /* content: 'Small'; */
+      content: '10px';
+    }
+
+    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
+    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+      /* content: 'Large'; */
+      content: '14px';
+    }
+
+    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
+    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+      /* content: 'Huge'; */
+      content: '16px';
+    }
+
+    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+      font-size: 10px;
+    }
+
+    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+      /* font-size: 18px; */
+      font-size: 14px;
+    }
+
+    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+      /* font-size: 32px; */
+      font-size: 16px;
+    }
+
+    .ql-editor.ql-blank:focus::before {
+      content: '';
+    }
+  </style>
+  <body>
+    <div id="toolbar"></div>
+    <script type="module" src="./quill.js"></script>
+
+    <script type="module" src="./index1.js"></script>
+  </body>
+</html>

packages/tessellation/index.js

@@ -0,0 +1,66 @@
+import Quill from '../quill/dist';  // Import Quill
+import '../quill/dist/dist/quill.snow.css';  // Optional: Import the default Quill theme CSS
+
+
+const toolbarOptions = [
+    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+    ['blockquote', 'code-block'],
+    ['link', 'image', 'video', 'formula'],
+
+    [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+    [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+    [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+    [{ direction: 'rtl' }], // text direction
+
+    [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+
+    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+    [{ font: [] }],
+    [{ align: [] }],
+    ['clean'], // remove formatting button
+  ];
+// Your Quill initialization code
+const quill = new Quill('#toolbar', {
+    modules: {
+        toolbar: {
+          container: toolbarOptions,
+        },
+      },
+      placeholder: 'Compose an epic...',
+      theme: 'snow', // or 'bubble'
+});
+
+
+// Function to delete one grapheme (Unicode-safe) on backspace
+function deleteLastGrapheme(quill) {
+  // Get the current selection
+  let range = quill.getSelection();
+  if (!range || range.index === 0) return; // No selection or at the beginning
+
+  // Get text before the cursor
+  const deleteEndIndex = range.index;
+  let textBeforeCursor = quill.getText(0, deleteEndIndex);
+
+  // Use Intl.Segmenter to segment text into graphemes
+  const segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });
+  const graphemes = Array.from(segmenter.segment(textBeforeCursor), s => s.segment);
+
+  if (graphemes.length > 0) {
+    // Calculate the length of the last grapheme
+    const lastGrapheme = graphemes[graphemes.length - 1];
+    const graphemeLength = lastGrapheme.length;
+
+    // Delete the last grapheme
+    quill.deleteText(deleteEndIndex - graphemeLength, graphemeLength);
+  }
+}
+
+// Custom binding for the Backspace key
+quill.keyboard.addBinding({
+  key: 8  // Backspace key code
+}, function(range, context) {
+  if (range && range.index > 0) {
+    deleteLastGrapheme(quill); // Use custom delete function
+    return false;  // Prevent Quill's default backspace handling
+  }
+});

packages/tessellation/index1.js

@@ -0,0 +1,60 @@
+const toolbarOptions = [
+  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
+  ['blockquote', 'code-block'],
+  ['link', 'image', 'video', 'formula'],
+
+  [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+  [{ direction: 'rtl' }], // text direction
+
+  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+
+  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+  [{ font: [] }],
+  [{ align: [] }],
+  ['clean'], // remove formatting button
+];
+const quill = new Quill('#toolbar', {
+  modules: {
+    toolbar: {
+      container: toolbarOptions,
+    },
+  },
+  placeholder: 'Compose an epic...',
+  theme: 'snow', // or 'bubble'
+});
+
+// Function to delete one grapheme (Unicode-safe) on backspace
+function deleteLastGrapheme(quill) {
+  // Get the current selection
+  let range = quill.getSelection();
+  if (!range || range.index === 0) return; // No selection or at the beginning
+
+  // Get text before the cursor
+  const deleteEndIndex = range.index;
+  let textBeforeCursor = quill.getText(0, deleteEndIndex);
+
+  // Use Intl.Segmenter to segment text into graphemes
+  const segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });
+  const graphemes = Array.from(segmenter.segment(textBeforeCursor), s => s.segment);
+
+  if (graphemes.length > 0) {
+    // Calculate the length of the last grapheme
+    const lastGrapheme = graphemes[graphemes.length - 1];
+    const graphemeLength = lastGrapheme.length;
+
+    // Delete the last grapheme
+    quill.deleteText(deleteEndIndex - graphemeLength, graphemeLength);
+  }
+}
+
+// Custom binding for the Backspace key
+quill.keyboard.addBinding({
+  key: 8  // Backspace key code
+}, function(range, context) {
+  if (range && range.index > 0) {
+    deleteLastGrapheme(quill); // Use custom delete function
+    return false;  // Prevent Quill's default backspace handling
+  }
+});