refactor: remove rich text container keymap (#8004)

packages/affine/components/src/rich-text/index.ts

@@ -37,6 +37,7 @@ export {
   getAffineInlineSpecsWithReference,
   toggleLinkPopup,
 } from './inline/index.js';
+export { textKeymap } from './keymap/index.js';
 export { insertLinkedNode } from './linked-node.js';
 export { markdownInput } from './markdown/index.js';
 export { RichText } from './rich-text.js';

packages/affine/components/src/rich-text/keymap/basic.ts

@@ -0,0 +1,72 @@
+import type { BlockStdScope, UIEventHandler } from '@blocksuite/block-std';
+
+import {
+  focusTextModel,
+  getInlineEditorByModel,
+  selectTextModel,
+} from '../dom.js';
+
+export const textCommonKeymap = (
+  std: BlockStdScope
+): Record<string, UIEventHandler> => {
+  return {
+    ArrowUp: () => {
+      const text = std.selection.find('text');
+      if (!text) return;
+      const inline = getInlineEditorByModel(std.host, text.from.blockId);
+      if (!inline) return;
+      return !inline.isFirstLine(inline.getInlineRange());
+    },
+    ArrowDown: () => {
+      const text = std.selection.find('text');
+      if (!text) return;
+      const inline = getInlineEditorByModel(std.host, text.from.blockId);
+      if (!inline) return;
+      return !inline.isLastLine(inline.getInlineRange());
+    },
+    Escape: ctx => {
+      const text = std.selection.find('text');
+      if (!text) return;
+
+      selectBlock(std, text.from.blockId);
+      ctx.get('keyboardState').raw.stopPropagation();
+      return true;
+    },
+    'Mod-a': ctx => {
+      const text = std.selection.find('text');
+      if (!text) return;
+
+      const model = std.doc.getBlock(text.from.blockId)?.model;
+      if (!model || !model.text) return;
+
+      ctx.get('keyboardState').raw.preventDefault();
+
+      if (
+        text.from.index === 0 &&
+        text.from.length === model.text.yText.length
+      ) {
+        selectBlock(std, text.from.blockId);
+        return true;
+      }
+
+      selectTextModel(std, text.from.blockId, 0, model.text.yText.length);
+      return true;
+    },
+    Enter: ctx => {
+      const blocks = std.selection.filter('block');
+      const blockId = blocks.at(-1)?.blockId;
+
+      if (!blockId) return;
+      const model = std.doc.getBlock(blockId)?.model;
+      if (!model || !model.text) return;
+
+      ctx.get('keyboardState').raw.preventDefault();
+      focusTextModel(std, blockId, model.text.yText.length);
+      return true;
+    },
+  };
+};
+
+function selectBlock(std: BlockStdScope, blockId: string) {
+  std.selection.setGroup('note', [std.selection.create('block', { blockId })]);
+}

packages/affine/components/src/rich-text/keymap/bracket.ts

@@ -0,0 +1,162 @@
+import type { BlockStdScope, UIEventHandler } from '@blocksuite/block-std';
+import type { InlineEditor } from '@blocksuite/inline';
+
+import { BRACKET_PAIRS } from '@blocksuite/affine-shared/consts';
+import {
+  createDefaultDoc,
+  matchFlavours,
+} from '@blocksuite/affine-shared/utils';
+
+import { getInlineEditorByModel } from '../dom.js';
+import { insertLinkedNode } from '../linked-node.js';
+
+export const bracketKeymap = (
+  std: BlockStdScope
+): Record<string, UIEventHandler> => {
+  const keymap = BRACKET_PAIRS.reduce(
+    (acc, pair) => {
+      return {
+        ...acc,
+        [pair.right]: ctx => {
+          const { doc, selection } = std;
+          if (doc.readonly) return;
+
+          const textSelection = selection.find('text');
+          if (!textSelection) return;
+          const model = doc.getBlock(textSelection.from.blockId)?.model;
+          if (!model) return;
+          if (!matchFlavours(model, ['affine:code'])) return;
+          const inlineEditor = getInlineEditorByModel(
+            std.host,
+            textSelection.from.blockId
+          );
+          if (!inlineEditor) return;
+          const inlineRange = inlineEditor.getInlineRange();
+          if (!inlineRange) return;
+          const left = inlineEditor.yText.toString()[inlineRange.index - 1];
+          const right = inlineEditor.yText.toString()[inlineRange.index];
+          if (pair.left === left && pair.right === right) {
+            inlineEditor.setInlineRange({
+              index: inlineRange.index + 1,
+              length: 0,
+            });
+            ctx.get('keyboardState').raw.preventDefault();
+          }
+        },
+        [pair.left]: ctx => {
+          const { doc, selection } = std;
+          if (doc.readonly) return;
+
+          const textSelection = selection.find('text');
+          if (!textSelection) return;
+          const model = doc.getBlock(textSelection.from.blockId)?.model;
+          if (!model) return;
+
+          const isCodeBlock = matchFlavours(model, ['affine:code']);
+          // When selection is collapsed, only trigger auto complete in code block
+          if (textSelection.isCollapsed() && !isCodeBlock) return;
+          if (!textSelection.isInSameBlock()) return;
+
+          ctx.get('keyboardState').raw.preventDefault();
+
+          const inlineEditor = getInlineEditorByModel(
+            std.host,
+            textSelection.from.blockId
+          );
+          if (!inlineEditor) return;
+          const inlineRange = inlineEditor.getInlineRange();
+          if (!inlineRange) return;
+          const selectedText = inlineEditor.yText
+            .toString()
+            .slice(inlineRange.index, inlineRange.index + inlineRange.length);
+          if (!isCodeBlock && pair.name === 'square bracket') {
+            // [[Selected text]] should automatically be converted to a Linked doc with the title "Selected text".
+            // See https://github.com/toeverything/blocksuite/issues/2730
+            const success = tryConvertToLinkedDoc(std, inlineEditor);
+            if (success) return true;
+          }
+          inlineEditor.insertText(
+            inlineRange,
+            pair.left + selectedText + pair.right
+          );
+
+          inlineEditor.setInlineRange({
+            index: inlineRange.index + 1,
+            length: inlineRange.length,
+          });
+
+          return true;
+        },
+      };
+    },
+    {} as Record<string, UIEventHandler>
+  );
+
+  return {
+    ...keymap,
+    '`': ctx => {
+      const { doc, selection } = std;
+      if (doc.readonly) return;
+
+      const textSelection = selection.find('text');
+      if (!textSelection || textSelection.isCollapsed()) return;
+      if (!textSelection.isInSameBlock()) return;
+      const model = doc.getBlock(textSelection.from.blockId)?.model;
+      if (!model) return;
+
+      ctx.get('keyboardState').raw.preventDefault();
+      const inlineEditor = getInlineEditorByModel(
+        std.host,
+        textSelection.from.blockId
+      );
+      if (!inlineEditor) return;
+      const inlineRange = inlineEditor.getInlineRange();
+      if (!inlineRange) return;
+      inlineEditor.formatText(inlineRange, { code: true });
+
+      inlineEditor.setInlineRange({
+        index: inlineRange.index,
+        length: inlineRange.length,
+      });
+
+      return true;
+    },
+  };
+};
+
+function tryConvertToLinkedDoc(std: BlockStdScope, inlineEditor: InlineEditor) {
+  const root = std.doc.root;
+  if (!root) return false;
+  const linkedDocWidgetEle = std.view.getWidget(
+    'affine-linked-doc-widget',
+    root.id
+  );
+  if (!linkedDocWidgetEle) return false;
+
+  const inlineRange = inlineEditor.getInlineRange();
+  if (!inlineRange) return false;
+  const text = inlineEditor.yText.toString();
+  const left = text[inlineRange.index - 1];
+  const right = text[inlineRange.index + inlineRange.length];
+  const needConvert = left === '[' && right === ']';
+  if (!needConvert) return false;
+
+  const docName = text.slice(
+    inlineRange.index,
+    inlineRange.index + inlineRange.length
+  );
+  inlineEditor.deleteText({
+    index: inlineRange.index - 1,
+    length: inlineRange.length + 2,
+  });
+  inlineEditor.setInlineRange({ index: inlineRange.index - 1, length: 0 });
+
+  const doc = createDefaultDoc(std.doc.collection, {
+    title: docName,
+  });
+  insertLinkedNode({
+    inlineEditor,
+    docId: doc.id,
+  });
+  return true;
+}

packages/affine/components/src/rich-text/keymap/format.ts

@@ -0,0 +1,26 @@
+import type { BlockStdScope, UIEventHandler } from '@blocksuite/block-std';
+
+import { textFormatConfigs } from '../format/index.js';
+
+export const textFormatKeymap = (std: BlockStdScope) =>
+  textFormatConfigs
+    .filter(config => config.hotkey)
+    .reduce(
+      (acc, config) => {
+        return {
+          ...acc,
+          [config.hotkey as string]: ctx => {
+            const { doc, selection } = std;
+            if (doc.readonly) return;
+
+            const textSelection = selection.find('text');
+            if (!textSelection) return;
+
+            config.action(std.host);
+            ctx.get('keyboardState').raw.preventDefault();
+            return true;
+          },
+        };
+      },
+      {} as Record<string, UIEventHandler>
+    );

packages/affine/components/src/rich-text/keymap/index.ts

@@ -0,0 +1,15 @@
+import type { BlockStdScope, UIEventHandler } from '@blocksuite/block-std';
+
+import { textCommonKeymap } from './basic.js';
+import { bracketKeymap } from './bracket.js';
+import { textFormatKeymap } from './format.js';
+
+export const textKeymap = (
+  std: BlockStdScope
+): Record<string, UIEventHandler> => {
+  return {
+    ...textCommonKeymap(std),
+    ...textFormatKeymap(std),
+    ...bracketKeymap(std),
+  };
+};

packages/affine/shared/src/utils/model.ts

@@ -1,6 +1,6 @@
 import type { NoteBlockModel } from '@blocksuite/affine-model';
 import type { BlockComponent, EditorHost } from '@blocksuite/block-std';
-import type { BlockModel, Doc } from '@blocksuite/store';
+import type { BlockModel, Doc, DocCollection } from '@blocksuite/store';
 
 import { minimatch } from 'minimatch';
 
@@ -67,3 +67,29 @@ export function findNoteBlockModel(model: BlockModel) {
     matchFlavours(m, ['affine:note'])
   ) as NoteBlockModel | null;
 }
+
+export function createDefaultDoc(
+  collection: DocCollection,
+  options: { id?: string; title?: string } = {}
+) {
+  const doc = collection.createDoc({ id: options.id });
+
+  doc.load();
+  const title = options.title ?? '';
+  const rootId = doc.addBlock('affine:page', {
+    title: new doc.Text(title),
+  });
+  collection.setDocMeta(doc.id, {
+    title,
+  });
+
+  // @ts-ignore FIXME: will be fixed when surface model migrated to affine-model
+  doc.addBlock('affine:surface', {}, rootId);
+  const noteId = doc.addBlock('affine:note', {}, rootId);
+  doc.addBlock('affine:paragraph', {}, noteId);
+  // To make sure the content of new doc would not be clear
+  // By undo operation for the first time
+  doc.resetHistory();
+
+  return doc;
+}