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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.2-staging.4d6ad0f",
+  "version": "0.8.2",
   "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/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"
+    "@dxos/async": "0.8.2",
+    "@dxos/app-graph": "0.8.2",
+    "@dxos/context": "0.8.2",
+    "@dxos/display-name": "0.8.2",
+    "@dxos/debug": "0.8.2",
+    "@dxos/echo-schema": "0.8.2",
+    "@dxos/invariant": "0.8.2",
+    "@dxos/lit-ui": "0.8.2",
+    "@dxos/log": "0.8.2",
+    "@dxos/live-object": "0.8.2",
+    "@dxos/react-ui-menu": "0.8.2",
+    "@dxos/protocols": "0.8.2",
+    "@dxos/react-hooks": "0.8.2",
+    "@dxos/util": "0.8.2"
   },
   "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.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"
+    "@dxos/echo-signals": "0.8.2",
+    "@dxos/random": "0.8.2",
+    "@dxos/config": "0.8.2",
+    "@dxos/react-client": "0.8.2",
+    "@dxos/react-ui": "0.8.2",
+    "@dxos/react-ui-syntax-highlighter": "0.8.2",
+    "@dxos/keyboard": "0.8.2",
+    "@dxos/storybook-utils": "0.8.2",
+    "@dxos/react-ui-theme": "0.8.2"
   },
   "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.4d6ad0f",
-    "@dxos/react-ui-theme": "0.8.2-staging.4d6ad0f",
-    "@dxos/react-ui": "0.8.2-staging.4d6ad0f"
+    "@dxos/react-ui": "0.8.2",
+    "@dxos/react-client": "0.8.2",
+    "@dxos/react-ui-theme": "0.8.2"
   },
   "publishConfig": {
     "access": "public"

package/src/extensions/command/menu.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
+import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 
 import { closeEffect, openEffect } from './action';
 
@@ -33,11 +33,10 @@ 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('border-none', 'fixed', 'p-0');
+        this.tag.classList.add('cm-ref-tag');
         this.tag.appendChild(button);
         container.appendChild(this.tag);
 
@@ -47,12 +46,24 @@ 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.selectionSet || update.viewportChanged || update.docChanged || update.geometryChanged) {
+        } else if (
+          update.docChanged ||
+          update.focusChanged ||
+          update.geometryChanged ||
+          update.selectionSet ||
+          update.viewportChanged
+        ) {
           this.scheduleUpdate();
         }
       }
@@ -94,4 +105,24 @@ 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,9 +123,28 @@ 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 pos = getSelection(view.state)?.from;
   const tree = view.state.facet(treeFacet);
+  const pos = getSelection(view.state)?.from;
   const current = tree.find(pos);
   if (current) {
     const type = current.type === 'task' ? 'bullet' : 'task';
@@ -233,10 +252,19 @@ 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,11 +101,15 @@ 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;
+        const deleteLine = fromA === startItem?.lineRange.from && toA === startItem?.lineRange.to + 1;
+        if (deleteLine) {
+          return;
+        }
+
         // if (!deleteLine && (!startItem || fromA < startItem.contentRange.from || toA > startItem.contentRange.to)) {
         //   cancel = true;
         //   return;

package/src/extensions/outliner/index.ts

@@ -2,5 +2,6 @@
 // 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()];
 
-// Flaky
-describe.skip('outliner', () => {
+// TODO(burdon): Flaky.
+describe.runIf(!process.env.CI)('outliner', () => {
   const state = EditorState.create({ doc: str(...lines), extensions });
 
   test('sanity', ({ expect }) => {

package/src/extensions/outliner/outliner.ts

@@ -28,6 +28,10 @@ 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.
@@ -35,7 +39,7 @@ import { decorateMarkdown } from '../markdown';
  * - Constrains editor to outline structure.
  * - Supports smart cut-and-paste.
  */
-export const outliner = (): Extension => [
+export const outliner = (options: OutlinerProps = {}): Extension => [
   // Commands.
   Prec.highest(commands()),
 
@@ -52,7 +56,7 @@ export const outliner = (): Extension => [
   floatingMenu(),
 
   // Line decorations.
-  decorations(),
+  decorations(options),
 
   // Default markdown decorations.
   decorateMarkdown({ listPaddingLeft: 8 }),
@@ -64,7 +68,7 @@ export const outliner = (): Extension => [
 /**
  * Line decorations (for border and selection).
  */
-const decorations = () => [
+const decorations = (options: OutlinerProps) => [
   ViewPlugin.fromClass(
     class {
       decorations: DecorationSet = Decoration.none;
@@ -125,38 +129,40 @@ const decorations = () => [
   ),
 
   // Theme.
-  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)',
-    },
-  }),
+  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)',
+      },
+    }),
+  ),
 ];