@dxos/react-ui-editor 0.8.2-staging.42af850 → 0.8.2-staging.4d6ad0f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.2-staging.42af850",
+  "version": "0.8.2-staging.4d6ad0f",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -59,20 +59,20 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.2-staging.42af850",
-    "@dxos/async": "0.8.2-staging.42af850",
-    "@dxos/context": "0.8.2-staging.42af850",
-    "@dxos/debug": "0.8.2-staging.42af850",
-    "@dxos/display-name": "0.8.2-staging.42af850",
-    "@dxos/echo-schema": "0.8.2-staging.42af850",
-    "@dxos/lit-ui": "0.8.2-staging.42af850",
-    "@dxos/invariant": "0.8.2-staging.42af850",
-    "@dxos/live-object": "0.8.2-staging.42af850",
-    "@dxos/log": "0.8.2-staging.42af850",
-    "@dxos/react-hooks": "0.8.2-staging.42af850",
-    "@dxos/react-ui-menu": "0.8.2-staging.42af850",
-    "@dxos/protocols": "0.8.2-staging.42af850",
-    "@dxos/util": "0.8.2-staging.42af850"
+    "@dxos/async": "0.8.2-staging.4d6ad0f",
+    "@dxos/context": "0.8.2-staging.4d6ad0f",
+    "@dxos/debug": "0.8.2-staging.4d6ad0f",
+    "@dxos/app-graph": "0.8.2-staging.4d6ad0f",
+    "@dxos/echo-schema": "0.8.2-staging.4d6ad0f",
+    "@dxos/display-name": "0.8.2-staging.4d6ad0f",
+    "@dxos/lit-ui": "0.8.2-staging.4d6ad0f",
+    "@dxos/invariant": "0.8.2-staging.4d6ad0f",
+    "@dxos/log": "0.8.2-staging.4d6ad0f",
+    "@dxos/live-object": "0.8.2-staging.4d6ad0f",
+    "@dxos/protocols": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-hooks": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-menu": "0.8.2-staging.4d6ad0f",
+    "@dxos/util": "0.8.2-staging.4d6ad0f"
   },
   "devDependencies": {
     "@automerge/automerge": "3.0.0-beta.4",
@@ -101,15 +101,15 @@
     "vite": "5.4.7",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "@dxos/config": "0.8.2-staging.42af850",
-    "@dxos/echo-signals": "0.8.2-staging.42af850",
-    "@dxos/random": "0.8.2-staging.42af850",
-    "@dxos/keyboard": "0.8.2-staging.42af850",
-    "@dxos/react-client": "0.8.2-staging.42af850",
-    "@dxos/react-ui-syntax-highlighter": "0.8.2-staging.42af850",
-    "@dxos/react-ui": "0.8.2-staging.42af850",
-    "@dxos/react-ui-theme": "0.8.2-staging.42af850",
-    "@dxos/storybook-utils": "0.8.2-staging.42af850"
+    "@dxos/config": "0.8.2-staging.4d6ad0f",
+    "@dxos/echo-signals": "0.8.2-staging.4d6ad0f",
+    "@dxos/random": "0.8.2-staging.4d6ad0f",
+    "@dxos/keyboard": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-client": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-syntax-highlighter": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-theme": "0.8.2-staging.4d6ad0f",
+    "@dxos/storybook-utils": "0.8.2-staging.4d6ad0f"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -118,9 +118,9 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-client": "0.8.2-staging.42af850",
-    "@dxos/react-ui": "0.8.2-staging.42af850",
-    "@dxos/react-ui-theme": "0.8.2-staging.42af850"
+    "@dxos/react-client": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-theme": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui": "0.8.2-staging.4d6ad0f"
   },
   "publishConfig": {
     "access": "public"

package/src/extensions/command/menu.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
 import { closeEffect, openEffect } from './action';
 
@@ -33,10 +33,11 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
 
         const button = document.createElement('button');
         button.appendChild(icon);
+        button.classList.add('grid', 'items-center', 'justify-center', 'w-8', 'h-8');
 
         // TODO(burdon): Custom tag/styles?
         this.tag = document.createElement('dx-ref-tag');
-        this.tag.classList.add('cm-ref-tag');
+        this.tag.classList.add('border-none', 'fixed', 'p-0');
         this.tag.appendChild(button);
         container.appendChild(this.tag);
 
@@ -46,24 +47,12 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
       }
 
       update(update: ViewUpdate) {
-        this.tag.dataset.focused = update.view.hasFocus ? 'true' : 'false';
-        if (!update.view.hasFocus) {
-          return;
-        }
-
         // TODO(burdon): Timer to fade in/out.
         if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(openEffect)))) {
           this.tag.style.display = 'none';
-          this.tag.classList.add('opacity-10');
         } else if (update.transactions.some((tr) => tr.effects.some((effect) => effect.is(closeEffect)))) {
           this.tag.style.display = 'block';
-        } else if (
-          update.docChanged ||
-          update.focusChanged ||
-          update.geometryChanged ||
-          update.selectionSet ||
-          update.viewportChanged
-        ) {
+        } else if (update.selectionSet || update.viewportChanged || update.docChanged || update.geometryChanged) {
           this.scheduleUpdate();
         }
       }
@@ -105,24 +94,4 @@ export const floatingMenu = (options: FloatingMenuOptions = {}) => [
       }
     },
   ),
-
-  EditorView.theme({
-    '.cm-ref-tag': {
-      position: 'fixed',
-      padding: '0',
-      border: 'none',
-      transition: 'opacity 0.3s ease-in-out',
-      opacity: 0.1,
-    },
-    '.cm-ref-tag button': {
-      display: 'grid',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '2rem',
-      height: '2rem',
-    },
-    '.cm-ref-tag[data-focused="true"]': {
-      opacity: 1,
-    },
-  }),
 ];

package/src/extensions/outliner/commands.ts

@@ -123,28 +123,9 @@ export const moveItemUp: Command = (view: EditorView) => {
 // Misc commands.
 //
 
-export const deleteItem: Command = (view: EditorView) => {
-  const tree = view.state.facet(treeFacet);
-  const pos = getSelection(view.state).from;
-  const current = tree.find(pos);
-  if (current) {
-    view.dispatch({
-      selection: EditorSelection.cursor(current.lineRange.from),
-      changes: [
-        {
-          from: current.lineRange.from,
-          to: Math.min(current.lineRange.to + 1, view.state.doc.length),
-        },
-      ],
-    });
-  }
-
-  return true;
-};
-
 export const toggleTask: Command = (view: EditorView) => {
-  const tree = view.state.facet(treeFacet);
   const pos = getSelection(view.state)?.from;
+  const tree = view.state.facet(treeFacet);
   const current = tree.find(pos);
   if (current) {
     const type = current.type === 'task' ? 'bullet' : 'task';
@@ -252,19 +233,10 @@ export const commands = (): Extension =>
       run: moveItemUp,
     },
     //
-    // Delete.
-    //
-    {
-      key: 'Mod-Backspace',
-      preventDefault: true,
-      run: deleteItem,
-    },
-    //
     // Misc.
     //
     {
       key: 'Alt-t',
-      preventDefault: true,
       run: toggleTask,
     },
   ]);

package/src/extensions/outliner/editor.ts

@@ -101,15 +101,11 @@ export const editor = () => [
       const match = line.text.match(LIST_ITEM_REGEX);
       if (match) {
         // Check cursor was in a valid position.
-        const startTree = tr.startState.facet(treeFacet);
-        const startItem = startTree.find(tr.startState.selection.main.from);
+        // const startTree = tr.startState.facet(treeFacet);
+        // const startItem = startTree.find(tr.startState.selection.main.from);
 
         // Check if entire line was deleted (which is ok).
-        const deleteLine = fromA === startItem?.lineRange.from && toA === startItem?.lineRange.to + 1;
-        if (deleteLine) {
-          return;
-        }
-
+        // const deleteLine = fromA === startItem?.lineRange.from && toA === startItem?.lineRange.to;
         // if (!deleteLine && (!startItem || fromA < startItem.contentRange.from || toA > startItem.contentRange.to)) {
         //   cancel = true;
         //   return;

package/src/extensions/outliner/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './commands';
 export * from './outliner';
 export * from './tree';

package/src/extensions/outliner/outliner.test.ts

@@ -29,8 +29,8 @@ const getPos = (line: number) => {
 
 const extensions = [createMarkdownExtensions(), outlinerTree()];
 
-// TODO(burdon): Flaky.
-describe.runIf(!process.env.CI)('outliner', () => {
+// Flaky
+describe.skip('outliner', () => {
   const state = EditorState.create({ doc: str(...lines), extensions });
 
   test('sanity', ({ expect }) => {

package/src/extensions/outliner/outliner.ts

@@ -28,10 +28,6 @@ import { decorateMarkdown } from '../markdown';
 // TODO(burdon): Smart Cut-and-paste.
 // TODO(burdon): DND.
 
-export type OutlinerProps = {
-  showSelected?: boolean;
-};
-
 /**
  * Outliner extension.
  * - Stores outline as a standard markdown document with task and list markers.
@@ -39,7 +35,7 @@ export type OutlinerProps = {
  * - Constrains editor to outline structure.
  * - Supports smart cut-and-paste.
  */
-export const outliner = (options: OutlinerProps = {}): Extension => [
+export const outliner = (): Extension => [
   // Commands.
   Prec.highest(commands()),
 
@@ -56,7 +52,7 @@ export const outliner = (options: OutlinerProps = {}): Extension => [
   floatingMenu(),
 
   // Line decorations.
-  decorations(options),
+  decorations(),
 
   // Default markdown decorations.
   decorateMarkdown({ listPaddingLeft: 8 }),
@@ -68,7 +64,7 @@ export const outliner = (options: OutlinerProps = {}): Extension => [
 /**
  * Line decorations (for border and selection).
  */
-const decorations = (options: OutlinerProps) => [
+const decorations = () => [
   ViewPlugin.fromClass(
     class {
       decorations: DecorationSet = Decoration.none;
@@ -129,40 +125,38 @@ const decorations = (options: OutlinerProps) => [
   ),
 
   // Theme.
-  EditorView.theme(
-    Object.assign({
-      '.cm-list-item': {
-        borderLeftWidth: '1px',
-        borderRightWidth: '1px',
-        paddingLeft: '32px',
-        borderColor: 'transparent',
-      },
-      '.cm-list-item.cm-codeblock-start': {
-        borderRadius: '0',
-      },
-
-      '.cm-list-item-start': {
-        borderTopWidth: '1px',
-        borderTopLeftRadius: '4px',
-        borderTopRightRadius: '4px',
-        paddingTop: '4px',
-        marginTop: '2px',
-      },
-
-      '.cm-list-item-end': {
-        borderBottomWidth: '1px',
-        borderBottomLeftRadius: '4px',
-        borderBottomRightRadius: '4px',
-        paddingBottom: '4px',
-        marginBottom: '2px',
-      },
-
-      '.cm-list-item-selected': {
-        borderColor: options.showSelected ? 'var(--dx-separator)' : undefined,
-      },
-      '.cm-list-item-focused': {
-        borderColor: 'var(--dx-accentFocusIndicator)',
-      },
-    }),
-  ),
+  EditorView.theme({
+    '.cm-list-item': {
+      borderLeftWidth: '1px',
+      borderRightWidth: '1px',
+      paddingLeft: '32px',
+      borderColor: 'transparent',
+    },
+    '.cm-list-item.cm-codeblock-start': {
+      borderRadius: '0',
+    },
+
+    '.cm-list-item-start': {
+      borderTopWidth: '1px',
+      borderTopLeftRadius: '4px',
+      borderTopRightRadius: '4px',
+      paddingTop: '4px',
+      marginTop: '8px',
+    },
+
+    '.cm-list-item-end': {
+      borderBottomWidth: '1px',
+      borderBottomLeftRadius: '4px',
+      borderBottomRightRadius: '4px',
+      paddingBottom: '4px',
+      marginBottom: '8px',
+    },
+
+    '.cm-list-item-selected': {
+      borderColor: 'var(--dx-separator)',
+    },
+    '.cm-list-item-focused': {
+      borderColor: 'var(--dx-accentFocusIndicator)',
+    },
+  }),
 ];