Spaces:

mihailik
/

localm

Configuration error

App Files Files Community

mihailik commited on Aug 21

Commit

0282567

1 Parent(s): 51d6c78

Enabling more natural styling and slash menu.

Browse files

Files changed (5) hide show

index.html +1 -0
package.json +2 -2
src/app/app.css +20 -11
src/app/enter-key.js +16 -2
src/app/init-milkdown.js +33 -7

index.html CHANGED Viewed

@@ -8,5 +8,6 @@
 </head>
 <body>
   <script src="index.js"></script>
 </body>
 </html>

 </head>
 <body>
   <script src="index.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
 </body>
 </html>

package.json CHANGED Viewed

@@ -1,9 +1,9 @@
 {
   "name": "localm",
-  "version": "1.1.13",
   "description": "Chat application",
   "scripts": {
-    "build": "esbuild src/index.js --target=es6 --bundle --sourcemap --outfile=./index.js --format=iife --external:fs --external:path --external:child_process --external:ws",
     "start": "npm run build -- --watch --serve=0.0.0.0:8812 --servedir=. --serve-fallback=index.html",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

 {
   "name": "localm",
+  "version": "1.1.14",
   "description": "Chat application",
   "scripts": {
+    "build": "esbuild src/index.js --target=es6 --bundle --sourcemap --outfile=./index.js --format=iife --external:fs --external:path --external:child_process --external:ws --external:katex/dist/katex.min.css",
     "start": "npm run build -- --watch --serve=0.0.0.0:8812 --servedir=. --serve-fallback=index.html",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

src/app/app.css CHANGED Viewed

@@ -10,19 +10,28 @@ body {
   display: grid;
   grid-template: 1fr auto / 1fr;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-.milkdown {
-  display: grid;
-  grid-template: 1fr / 1fr;
-  padding: 0;
-  .ProseMirror {
-    padding: 0.6em 1em;
-    font-family: inherit;
-    white-space: pre-wrap;
-    outline: none;
-    margin: 0;
   }
 }

   display: grid;
   grid-template: 1fr auto / 1fr;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  .milkdown {
+    display: grid;
+    grid-template: 1fr / 1fr;
+    padding: 0;
+    .ProseMirror {
+      padding: 0.6em 1em;
+      font-family: inherit;
+      white-space: pre-wrap;
+      outline: none;
+      margin: 0;
+      pre {
+        background: inherit;
+        color: inherit;
+        code {
+          color: inherit;
+        }
+      }
+    }
   }
 }

src/app/enter-key.js CHANGED Viewed

@@ -36,9 +36,17 @@ export function makeEnterPlugins({ workerConnection }) {
       shortcuts: 'Enter',
       command: (ctx) => {
         const commands = ctx.get(commandsCtx);
-        return () => commands.call(myEnterCommand.key);
       },
-      priority: 100,
     },
   });
@@ -60,6 +68,12 @@ export function setupCrepeEnterKey(crepeInput, workerConnection) {
     if (view.dom) {
       view.dom.addEventListener('keydown', (e) => {
         if (e.key === 'Enter' && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
           e.preventDefault();
           // Get markdown using the underlying editor's serializer

       shortcuts: 'Enter',
       command: (ctx) => {
         const commands = ctx.get(commandsCtx);
+        return () => {
+          // Check if slash menu is open first
+          const slashMenu = document.querySelector('.milkdown-slash-menu[data-show="true"]');
+          if (slashMenu) {
+            // Let the slash menu handle Enter
+            return false;
+          }
+          return commands.call(myEnterCommand.key);
+        };
       },
+      priority: 50, // Lower priority so slash menu can intercept first
     },
   });
     if (view.dom) {
       view.dom.addEventListener('keydown', (e) => {
         if (e.key === 'Enter' && !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
+          // Check if slash menu is open - if so, let it handle Enter
+          const slashMenu = document.querySelector('.milkdown-slash-menu[data-show="true"]');
+          if (slashMenu) {
+            return false; // Don't prevent default, let slash menu handle it
+          }
           e.preventDefault();
           // Get markdown using the underlying editor's serializer

src/app/init-milkdown.js CHANGED Viewed

@@ -7,9 +7,12 @@ import {
   editorViewOptionsCtx,
   rootCtx
 } from '@milkdown/core';
 import { commonmark } from '@milkdown/kit/preset/commonmark';
 import { slashFactory } from "@milkdown/plugin-slash";
-import { Crepe } from '@milkdown/crepe';
 /**
  * @typedef {{
@@ -49,22 +52,45 @@ export async function initMilkdown({
     root: chatInput,
     defaultValue: '',
     features: {
-      [Crepe.Feature.BlockEdit]: false, // Disable slash menu and block editing
       [Crepe.Feature.Placeholder]: true,
       [Crepe.Feature.Cursor]: true,
       [Crepe.Feature.ListItem]: true,
       [Crepe.Feature.CodeMirror]: true,
       // Disable features not needed for chat input
-      [Crepe.Feature.ImageBlock]: false,
-      [Crepe.Feature.Table]: false,
-      [Crepe.Feature.Latex]: false,
-      [Crepe.Feature.Toolbar]: false,
-      [Crepe.Feature.LinkTooltip]: false
     },
     featureConfigs: {
       [Crepe.Feature.Placeholder]: {
         text: 'Start typing...',
         mode: 'block'
       }
     }
   });

   editorViewOptionsCtx,
   rootCtx
 } from '@milkdown/core';
+import { Crepe } from '@milkdown/crepe';
 import { commonmark } from '@milkdown/kit/preset/commonmark';
 import { slashFactory } from "@milkdown/plugin-slash";
+import "@milkdown/crepe/theme/common/style.css";
+import "@milkdown/crepe/theme/frame.css";
 /**
  * @typedef {{
     root: chatInput,
     defaultValue: '',
     features: {
+      [Crepe.Feature.BlockEdit]: true, // Enable slash menu
       [Crepe.Feature.Placeholder]: true,
       [Crepe.Feature.Cursor]: true,
       [Crepe.Feature.ListItem]: true,
       [Crepe.Feature.CodeMirror]: true,
       // Disable features not needed for chat input
+      [Crepe.Feature.ImageBlock]: true,
+      [Crepe.Feature.Table]: true,
+      [Crepe.Feature.Latex]: true,
+      [Crepe.Feature.Toolbar]: true,
+      [Crepe.Feature.LinkTooltip]: true
     },
     featureConfigs: {
       [Crepe.Feature.Placeholder]: {
         text: 'Start typing...',
         mode: 'block'
+      },
+      [Crepe.Feature.BlockEdit]: {
+        textGroup: {
+          label: 'Text',
+          text: null, // Hide /text option
+          h1: { label: 'Heading', icon: '#' },
+          h2: null, h3: null, h4: null, h5: null, h6: null, // Hide other headings
+          quote: { label: 'Quote', icon: '>' },
+          divider: null
+        },
+        listGroup: {
+          label: 'Lists',
+          bulletList: { label: 'List', icon: '•' },
+          orderedList: { label: 'Numbered', icon: '1.' },
+          taskList: null
+        },
+        advancedGroup: {
+          label: 'Code',
+          codeBlock: { label: 'Code', icon: '`' },
+          image: null,
+          table: null,
+          math: null
+        }
       }
     }
   });