@dxos/react-ui-editor 0.6.6 → 0.6.7-staging.1976059

package/dist/types/src/hooks/TextEditor.stories.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import '@dxosTheme';
+import React from 'react';
 import { type UseTextEditorProps } from './useTextEditor';
 type StoryProps = {
     id?: string;
@@ -10,7 +10,7 @@ type StoryProps = {
 declare const _default: {
     title: string;
     decorators: import("@storybook/react/*").Decorator[];
-    render: ({ id, text, extensions: _extensions, readonly, placeholder, selection, }: StoryProps) => JSX.Element;
+    render: ({ id, text, extensions: _extensions, readonly, placeholder, selection, }: StoryProps) => React.JSX.Element;
     parameters: {
         translations: {
             'en-US': {
@@ -26,6 +26,8 @@ declare const _default: {
                     'blockquote label': string;
                     'codeblock label': string;
                     'comment label': string;
+                    'selection overlaps existing comment label': string;
+                    'select text to comment label': string;
                     'image label': string;
                     'heading label': string;
                     'table label': string;
@@ -44,69 +46,69 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Readonly: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const NoExtensions: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Empty: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Scrolling: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const ScrollingWithImages: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Links: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Image: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Code: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Lists: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Table: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Autocomplete: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const CommentedOut: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Mention: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Command: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Comments: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Vim: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Annotations: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const DND: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Listener: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Typewriter: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const Blast: {
-    render: () => JSX.Element;
+    render: () => React.JSX.Element;
 };
 //# sourceMappingURL=TextEditor.stories.d.ts.map

package/dist/types/src/hooks/TextEditor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/TextEditor.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAmBpB,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA0NzE,KAAK,UAAU,GAAG;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,YAAY,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCzD,wBAKE;AAeF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAEpB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAExB,CAAC;AASF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAIF,eAAO,MAAM,SAAS;;CAUrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAE/B,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,IAAI;;CAEhB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAIjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAYxB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAWxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAWnB,CAAC;AAmDF,eAAO,MAAM,OAAO;;CAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAsCpB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAOf,CAAC;AAEF,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAaf,CAAC;AAIF,eAAO,MAAM,QAAQ;;CAgBpB,CAAC;AAEF,eAAO,MAAM,UAAU;;CAOtB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAqBjB,CAAC"}
+{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../../src/hooks/TextEditor.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAKpB,OAAO,KAAqE,MAAM,OAAO,CAAC;AAc1F,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA0NzE,KAAK,UAAU,GAAG;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,kBAAkB,EAAE,WAAW,GAAG,YAAY,CAAC,CAAC;;;;uFAStD,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Bb,wBAKE;AAeF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAEpB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAExB,CAAC;AASF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAIF,eAAO,MAAM,SAAS;;CAUrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;CAE/B,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,IAAI;;CAEhB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAIjB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAYxB,CAAC;AAEF,eAAO,MAAM,YAAY;;CAWxB,CAAC;AAEF,eAAO,MAAM,OAAO;;CAWnB,CAAC;AAmDF,eAAO,MAAM,OAAO;;CAOnB,CAAC;AAEF,eAAO,MAAM,QAAQ;;CAsCpB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAOf,CAAC;AAEF,eAAO,MAAM,WAAW;;CAEvB,CAAC;AAEF,eAAO,MAAM,GAAG;;CAaf,CAAC;AAIF,eAAO,MAAM,QAAQ;;CAgBpB,CAAC;AAEF,eAAO,MAAM,UAAU;;CAOtB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAqBjB,CAAC"}

package/dist/types/src/hooks/useActionHandler.d.ts

@@ -1,4 +1,4 @@
 import { type EditorView } from '@codemirror/view';
 import { type ToolbarProps } from '../components';
-export declare const useActionHandler: (view?: EditorView | null) => ToolbarProps['onAction'];
+export declare const useActionHandler: (view?: EditorView | null) => ToolbarProps["onAction"];
 //# sourceMappingURL=useActionHandler.d.ts.map

package/dist/types/src/hooks/useTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAK5D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,GAAG;QACtD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,YAAY,CAAC,GAAG;IACrF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,WACjB,cAAc,kBAAkB,CAAC,4BAEvC,aA6HF,CAAC"}
+{"version":3,"file":"useTextEditor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTextEditor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAK5D,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,GAAG;QACtD,QAAQ,EAAE,CAAC,CAAC;QACZ,OAAO,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAC;KAC/C,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,WAAW,GAAG,YAAY,CAAC,GAAG;IACrF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,WACjB,aAAa,CAAC,kBAAkB,CAAC,SAClC,cAAc,KACnB,aA6HF,CAAC"}

package/dist/types/src/themes/default.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAgR1B,CAAC"}
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../src/themes/default.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,WAAW,CAAC;AAKrD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,WAoR1B,CAAC"}

package/dist/types/src/translations.d.ts

@@ -13,6 +13,8 @@ declare const _default: {
             'blockquote label': string;
             'codeblock label': string;
             'comment label': string;
+            'selection overlaps existing comment label': string;
+            'select text to comment label': string;
             'image label': string;
             'heading label': string;
             'table label': string;

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEhD,wBA4BE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEhD,wBA8BE"}

package/dist/types/src/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AAEH,eAAO,MAAM,eAAe,2BAA4B,CAAC,KAAG,CAOxC,CAAC;AAErB,eAAO,MAAM,UAAU,QAAS,SAAS,WAAW,EAAE,SAmBrD,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AAEH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,QAAQ,MAAM,CAAC,KAAG,CAOxC,CAAC;AAErB,eAAO,MAAM,UAAU,QAAS,SAAS,WAAW,EAAE,SAmBrD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.6.6",
+  "version": "0.6.7-staging.1976059",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -47,19 +47,19 @@
     "lodash.sortby": "^4.7.0",
     "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.6.6",
-    "@dxos/automerge": "0.6.6",
-    "@dxos/context": "0.6.6",
-    "@dxos/debug": "0.6.6",
-    "@dxos/display-name": "0.6.6",
-    "@dxos/echo-schema": "0.6.6",
-    "@dxos/invariant": "0.6.6",
-    "@dxos/log": "0.6.6",
-    "@dxos/protocols": "0.6.6",
-    "@dxos/react-async": "0.6.6",
-    "@dxos/react-ui": "0.6.6",
-    "@dxos/react-ui-theme": "0.6.6",
-    "@dxos/util": "0.6.6"
+    "@dxos/async": "0.6.7-staging.1976059",
+    "@dxos/context": "0.6.7-staging.1976059",
+    "@dxos/debug": "0.6.7-staging.1976059",
+    "@dxos/automerge": "0.6.7-staging.1976059",
+    "@dxos/invariant": "0.6.7-staging.1976059",
+    "@dxos/display-name": "0.6.7-staging.1976059",
+    "@dxos/echo-schema": "0.6.7-staging.1976059",
+    "@dxos/log": "0.6.7-staging.1976059",
+    "@dxos/protocols": "0.6.7-staging.1976059",
+    "@dxos/react-async": "0.6.7-staging.1976059",
+    "@dxos/react-ui": "0.6.7-staging.1976059",
+    "@dxos/react-ui-theme": "0.6.7-staging.1976059",
+    "@dxos/util": "0.6.7-staging.1976059"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -71,8 +71,8 @@
     "@types/lodash.get": "^4.4.7",
     "@types/lodash.pick": "^4.4.7",
     "@types/lodash.sortby": "^4.7.7",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
     "@types/react-test-renderer": "^17.0.2",
     "@vitest/browser": "^1.5.0",
     "@vitest/ui": "^1.5.0",
@@ -85,22 +85,22 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.5.0",
-    "@dxos/automerge": "0.6.6",
-    "@dxos/config": "0.6.6",
-    "@dxos/echo-signals": "0.6.6",
-    "@braneframe/types": "0.6.6",
-    "@dxos/echo-typegen": "0.6.6",
-    "@dxos/keyboard": "0.6.6",
-    "@dxos/random": "0.6.6",
-    "@dxos/react-client": "0.6.6",
-    "@dxos/react-ui": "0.6.6",
-    "@dxos/storybook-utils": "0.6.6"
+    "@dxos/automerge": "0.6.7-staging.1976059",
+    "@braneframe/types": "0.6.7-staging.1976059",
+    "@dxos/config": "0.6.7-staging.1976059",
+    "@dxos/echo-signals": "0.6.7-staging.1976059",
+    "@dxos/echo-typegen": "0.6.7-staging.1976059",
+    "@dxos/keyboard": "0.6.7-staging.1976059",
+    "@dxos/random": "0.6.7-staging.1976059",
+    "@dxos/react-ui": "0.6.7-staging.1976059",
+    "@dxos/react-client": "0.6.7-staging.1976059",
+    "@dxos/storybook-utils": "0.6.7-staging.1976059"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-client": "0.6.6"
+    "@dxos/react-client": "0.6.7-staging.1976059"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Toolbar/Toolbar.tsx

@@ -482,6 +482,14 @@ const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
 const MarkdownActions = () => {
   const { onAction, state } = useToolbarContext('MarkdownActions');
   const { t } = useTranslation(translationKey);
+
+  let toolTipKey = 'comment label';
+  if (state?.comment) {
+    toolTipKey = 'selection overlaps existing comment label';
+  } else if (state?.selection === false) {
+    toolTipKey = 'select text to comment label';
+  }
+
   return (
     <>
       {/* TODO(burdon): Toggle readonly state. */}
@@ -495,7 +503,7 @@ const MarkdownActions = () => {
         onClick={() => onAction?.({ type: 'comment' })}
         disabled={!state || state.comment || !state.selection}
       >
-        {t('comment label')}
+        {t(toolTipKey)}
       </ToolbarButton>
     </>
   );

package/src/extensions/automerge/automerge.stories.tsx

@@ -10,7 +10,7 @@ import React, { useEffect, useState } from 'react';
 import { TextType } from '@braneframe/types';
 import { Repo } from '@dxos/automerge/automerge-repo';
 import { BroadcastChannelNetworkAdapter } from '@dxos/automerge/automerge-repo-network-broadcastchannel';
-import { create, type Expando } from '@dxos/echo-schema';
+import { type Expando, create } from '@dxos/echo-schema';
 import { type PublicKey } from '@dxos/keys';
 import { Filter, DocAccessor, createDocAccessor, useSpace, useQuery, type Space } from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';

package/src/extensions/comments.ts

@@ -611,6 +611,10 @@ const hasActiveSelection = (state: EditorState): boolean => {
   return state.selection.ranges.some((range) => !range.empty);
 };
 
+/**
+ * Manages external comment synchronization for the editor.
+ * This class subscribes to external comment updates and applies them to the editor view.
+ */
 class ExternalCommentSync implements PluginValue {
   private readonly unsubscribe: () => void;
 

package/src/themes/default.ts

@@ -150,9 +150,7 @@ export const defaultTheme: ThemeStyles = {
   //
   // tooltip
   //
-  '.cm-tooltip': {
-    border: 'none',
-  },
+  '.cm-tooltip': {},
   '&light .cm-tooltip': {
     background: `${get(tokens, 'extend.colors.neutral.100')} !important`,
   },
@@ -165,21 +163,27 @@ export const defaultTheme: ThemeStyles = {
   // autocomplete
   // https://github.com/codemirror/autocomplete/blob/main/src/completion.ts
   //
-  '.cm-tooltip-autocomplete': {
+  '.cm-tooltip.cm-tooltip-autocomplete': {
     marginTop: '4px',
     marginLeft: '-3px',
   },
-  '.cm-tooltip-autocomplete > ul': {
+  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
     maxHeight: '20em !important',
   },
-  '.cm-tooltip-autocomplete > ul > li': {},
-  '.cm-tooltip-autocomplete > ul > li[aria-selected]': {},
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {},
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {},
   // TODO(burdon): Can we add a class prefix to avoid adding !important?
   '.cm-tooltip.cm-tooltip-autocomplete > ul > completion-section': {
     paddingLeft: '4px !important',
     borderBottom: 'none !important',
     color: get(tokens, 'extend.colors.primary.500'),
   },
+  '.cm-tooltip.cm-completionInfo': {
+    border: get(tokens, 'extend.colors.neutral.500'),
+    width: '360px !important',
+    margin: '-10px 1px 0 1px',
+    padding: '8px !important',
+  },
   '.cm-completionIcon': {
     display: 'none',
   },

package/src/translations.ts

@@ -19,6 +19,8 @@ export default [
         'blockquote label': 'Block quote',
         'codeblock label': 'Code block',
         'comment label': 'Create comment',
+        'selection overlaps existing comment label': 'Selection overlaps existing comment',
+        'select text to comment label': 'Select text to comment',
         'image label': 'Insert image',
         'heading label': 'Heading level',
         'table label': 'Create table',