Lexicalでリッチテキストエディターのベースを作る

npm i lexical @lexical/react

// Editor.tsx
import React, { FC } from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
import { LinkNode } from '@lexical/link';
import { EditorState } from 'lexical';

type Props = {
}
export const Editor: FC<Props> = ({
}) => {

  const onChange = (editor: EditorState) => {
    console.log(editor);
  };
  
  const onError = (e: Error) => {
    console.log(e)
  };

  return (
    <>
      <LexicalComposer initialConfig={{
        namespace: 'MySample',
        onError,
        nodes: [LinkNode]
      }}>
        <RichTextPlugin
          contentEditable={<ContentEditable />}
          placeholder={<div>Enter some text...</div>}
        />
        <OnChangePlugin onChange={onChange} />
        <div>
          <LexicalComposer initialConfig={{
            namespace: 'MySample',
            onError,
            nodes: [LinkNode]
          }}>
            <div>
              <RichTextPlugin
                contentEditable={<ContentEditable />}
                placeholder={<ContentEditable />}
              />
            </div>
            <OnChangePlugin onChange={onChange} />
            <HistoryPlugin />
            <LinkPlugin />
          </LexicalComposer>
        </div>
      </LexicalComposer>
    </>
  );
};

export default Editor

// ToolContext.ts
import React, { createContext, useContext, useEffect, useCallback } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $getSelection, $isRangeSelection } from 'lexical';

type Context = {
  // 各値の型
};

const ToolContext = createContext<Context>(
  {
    // 各値の初期値
  }
);

const useProvideTool = (): Context => {
  const [ editor ] = useLexicalComposerContext();

  const updateToolCondition = useCallback(() => {
    const selection = $getSelection();
    if(!$isRangeSelection(selection)) return;
    // ここにEditorの状態が更新後に処理したいことを書く
  }, []);

  useEffect(() => {
    editor.registerUpdateListener(({ editorState }) => {
      editorState.read(() => {
        updateToolCondition();
      });
    });
  }, [editor, updateToolCondition]);

  return {
  }
};

export const ToolProvider: React.FC = ({ children }) => {
  const value = useProvideTool();

  return (
    <ToolContext.Provider value={value}>
      {children}
    </ToolContext.Provider>
  )
};

export const useTool = () => {
  return useContext(ToolContext);
};

// ToolbarPlugin.tsx
import React, { FC } from 'react';

import { useTool } from '../context/ToolContext';

export const ToolbarPlugin: FC = ({
}) => {
  const tool = useTool();
  
  return;
};

export default ToolbarPlugin;

// Editor.tsx
import React, { FC } from 'react';

// 省略

import { ListPlugin } from '@lexical/react/LexicalListPlugin';
import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
import { ListNode, ListItemNode } from '@lexical/list';
import Toolbar from './ToolbarPlugin';
import { ToolProvider } from '../context/ToolContext';

export const Editor: FC = () => {

  // 省略

  return (
    <>
      <LexicalComposer initialConfig={{
        namespace: 'MyEditor',
        onError,
        nodes: [
          ListNode,
          ListItemNode
        ]
      }}>
        <ToolProvider>
          <ToolbarPlugin />
        </ToolProvider>
        <div>
          <RichTextPlugin
            contentEditable={<ContentEditable />}
            placeholder={<p>入力してください</p>}
          />
        </div>
        <OnChangePlugin onChange={onChange} />
        <ListPlugin />
        <CheckListPlugin />
      </LexicalComposer>
    </>
  );
};

export default Editor;

// ToolContext.ts
import React, { createContext, useCallback, useContext, useEffect } from 'react';

// 省略

import {
  INSERT_CHECK_LIST_COMMAND,
  INSERT_ORDERED_LIST_COMMAND,
  INSERT_UNORDERED_LIST_COMMAND,
} from '@lexical/list';

type Context = {
  toggleUnOrderList: () => void;
  toggleOrderList: () => void;
  toggleCheckList: () => void;
};

const ToolContext = createContext<Context>(
  {
    toggleUnOrderList: () => {},
    toggleOrderList: () => {},
    toggleCheckList: () => {},
  }
);

const useProvideTool = (): Context => {
  const [ editor ] = useLexicalComposerContext();

  // 省略

  const toggleUnOrderList = useCallback(() => {
    editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
  }, [editor]);

  const toggleOrderList = useCallback(() => {
    editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
  }, [editor]);

  const toggleCheckList = useCallback(() => {
    editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined);
  }, [editor]);

  return {
    toggleUnOrderList,
    toggleOrderList,
    toggleCheckList
  }
};

// 省略

// ToolbarPlugin.tsx

// 省略

export const ToolbarPlugin: FC = ({
}) => {
  const tool = useTool();
  
  return (
    <ul>
      <li>
        <button onClick={tool.toggleUnOrderList}>
          <span>UL</span>
        </button>
      </li>
      <li>
        <button onClick={tool.toggleOrderList}>
          <span>OL</span>
        </button>
      </li>
      <li>
        <button onClick={tool.toggleCheckList}>
          <span>CL</span>
        </button>
      </li>
    </ul>
  );
};

export default Toolbar;

// ToolContext.tsx
import React, { createContext, Dispatch, SetStateAction, useCallback, useContext, useEffect, useMemo, useState } from 'react';

//省略

import { $getSelection, $isRangeSelection, $isRootOrShadowRoot, EditorState, LexicalNode } from 'lexical';
import { $findMatchingParent, $getNearestNodeOfType } from '@lexical/utils';
import {
  ListNode,
  $isListNode,
  // 省略
  REMOVE_LIST_COMMAND
} from '@lexical/list';

export const BLOCK_TYPES = {
  UL: 'bullet',
  OL: 'number',
  CL: 'check',
  P: 'paragraph'
} as const;

type BlockType = typeof BLOCK_TYPES[keyof typeof BLOCK_TYPES];

const getSecondRootNode = (targetNode: LexicalNode) => {
  return targetNode.getKey() === 'root'
  ? targetNode
  : $findMatchingParent(targetNode, (node: LexicalNode) => {
    const parentNode = node.getParent();
    return parentNode !== null && $isRootOrShadowRoot(parentNode);
  });
};

type Context = {
  isUnOrderList: boolean;
  isOrderList: boolean;
  isCheckList: boolean;
  // 省略
};

const ToolContext = createContext<Context>(
  {
    isUnOrderList: false,
    isOrderList: false,
    isCheckList: false,
    // 省略
  }
);

const useProvideTool = (): Context => {
  const [blockType, setBlockType] = useState<BlockType>(BLOCK_TYPES.P);
  const [ editor ] = useLexicalComposerContext();

  const updateToolCondition = useCallback(() => {
    const selection = $getSelection();
    if(!$isRangeSelection(selection)) return;
  
    const anchorNode = selection.anchor.getNode();
    const targetNode = getSecondRootNode(anchorNode);
  
    if($isListNode(targetNode)) {
      const parentList = $getNearestNodeOfType<ListNode>(
        anchorNode,
        ListNode,
      );
      const type = parentList
        ? parentList.getListType()
        : targetNode.getListType();
      setBlockType(type);
　　　　　　　　　　　　return;
    }
    setBlockType(BLOCK_TYPES.P);
  }, []);

  useEffect(() => {
    editor.registerUpdateListener(({ editorState }) => {
      editorState.read(() => {
        updateToolCondition();
      });
    });
  }, [editor, updateToolCondition]);

  // 省略

  const [
    isUnOrderList,
    isOrderList,
    isCheckList, 
  ] = useMemo(() => [
    blockType === BLOCK_TYPES.UL,
    blockType === BLOCK_TYPES.OL,
    blockType === BLOCK_TYPES.CL
  ], [blockType]);

  const toggleUnOrderList = useCallback(() => {
    if(!isUnOrderList) {
      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
      return;
    }
    editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
  }, [editor, isUnOrderList]);

  // 省略

  return {
    isUnOrderList,
    isOrderList,
    isCheckList, 
    // 省略
  }
};

// 省略

// ToolbarPlugin.tsx
import React, { FC } from 'react';

import { useTool } from '../context/ToolContext';

export const ToolbarPlugin: FC = ({
}) => {
  const tool = useTool();
  
  return (
    <ul>
      <li>
        <button onClick={tool.toggleUnorderList}>
          {tool.isUnorderList ? <strong>UL</strong> : <span>UL</span>}
        </button>
      </li>
      <li>
        <button onClick={tool.toggleOrderList}>
          {tool.isOrderList ? <strong>OL</strong> : <span>OL</span>}
        </button>
      </li>
      <li>
        <button onClick={tool.toggleCheckList}>
          {tool.isCheckList ? <strong>CL</strong> : <span>CL</span>}
        </button>
      </li>
    </ul>
  );
};

export default Toolbar;