プレスリリースのエディターでTiptapを使って新機能開発をした話

<div class="pr-distributor">
  <img src="" alt="">
  <p class="pr-distributor__name">入力された会社名</p>
  <p class="pr-distributor__description">入力された会社情報</p>
</div>

<button type="button">配信者情報</button>

export const DistributorInputExtension = Node.create({
  name: 'pr_distributor_input',
  
  ...
  
  parseHTML() {
    return [{tag: .pr-distributor}];
  },
  renderHTML() {
    return ['div', {class: 'pr-distributor'}, 'Preview Distributor'];
  },
  addNodeView() {
    /* エディター上に表示したいReactコンポーネントを指定する */
    return ReactNodeViewRenderer(DistributorInputNodeView);
  }
  
  ...
  
});

export function DistributorInputNodeView({
  editor,
  selected,
  getPos,
  deleteNode,
}: NodeViewProps) {
  const {data: distributorList} = useGetDistributorList();

  const {modalType, setModalType, isOpen, setIsOpen} = useModalState();

  const openCreateDistributorModal = () => {
    setModalType('create');
    setIsOpen(true);
  };

  const openUpdateDistributorModal = () => {
    setModalType('update');
    setIsOpen(true);
  };

  const insertDistributor = async ({
    src,
    name,
    description,
  }: DistributorOptions) => {
    editor
      .chain()
      .focus()
      .setDistributorUnits(getPos(), {
        src,
        name,
        description,
      })
      .run();

    deleteNode();
  };

  function EntryButton() {
    return (
      <button
        type='button'
      >
        配信者情報
      </button>
    );
  }

  return (
    <NodeViewWrapper contentEditable={false}>
        <DistributorModal
          isOpen={isOpen}
          setIsOpen={setIsOpen}
          modalType={modalType}
        />
        <Popover trigger={EntryButton()} side='bottom'>
          <DistributorList
            isUploadingImage={isUploadingImage}
            distributorList={distributorList}
            openUpdateDistributorModal={openUpdateDistributorModal}
            insertDistributorIntoEditor={insertDistributor}
          />
          <List>
            <ListItem
              icon={<PlusIcon />}
              text='新規追加'
              onClickItem={openCreateDistributorModal}
            />
          </List>
        </Popover>
    </NodeViewWrapper>
  );
}

export type DistributorAttributes = {
  src?: string | null;
  name: string;
  description: string
};

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    pr_distributor: {
      setDistributorUnits: (
        pos: number,
        attributes: DistributorAttributes,
      ) => ReturnType;
    };
  }
}

export const DistributorExtension = Node.create({
  name: 'pr_distributor',
  
  ...
  
  addAttributes() {
    return {
      src: {
        default: null,
      },
      name: {
        default: null,
      },
      description: {
        default: null,
      },
    };
  },
  addCommands() {
    return {
      setDistributorUnits:
        (pos, options) =>
        ({commands}) => {
          return commands.insertContentAt(
            pos,
            {
              type: this.name,
              attrs: {
                src: options.src,
                name: options.name,
                description: options.description
              },
            },
            {
              updateSelection: true,
            },
          );
        },
    };
  },
  parseHTML() {
    return [
      {
        tag: '.pr-distributor',
        getAttrs: getDistributorNodeAttributes,
      },
    ];
  },
  renderHTML({HTMLAttributes}) {
    const {
      src,
      name,
      description,
    } = HTMLAttributes as DistributorAttributes;

    const isNoImage = src === null || src === undefined;

    if (isNoImage) {
      return [
        'div',
        {class: 'pr-distributor'},
        ['p', {class: 'pr-distributor__name'}, name],
        ['p', {class: 'pr-distributor__description'}, description],
      ];
    }

    return [
      'div',
      {class: 'pr-distributor'},
      [
        'img',
        {
          src,
          alt: name,
        },
      ],
      ['p', {class: 'pr-distributor__name'}, name],
      ['p', {class: 'pr-distributor__description'}, description],
    ];
  },
  
  ...
  
});

<!-- 画像が存在する場合 -->
<div class="pr-distributor">
  <img src="https://example.com/150x150.png" alt="{name}">
  <p class="pr-distributor__name">{name}</p>
  <p class="pr-distributor__description">{description}</p>
</div>

<!-- 画像が存在しない場合 -->
<div class="pr-distributor">
  <p class="pr-distributor__name">{name}</p>
  <p class="pr-distributor__description">{description}</p>
</div>

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    pr_box: {
      setBox: () => ReturnType;
    };
  }
}

export const BoxExtension = Node.create({
  name: 'pr_box',
  group: 'block',
  content: 'paragraph*',
 
  ...
 
  addOptions() {
    return {
      HTMLAttributes: {class: 'pr-box'},
    };
  },
  addCommands() {
    return {
      setBox:
        () =>
        ({commands}) => {
          return commands.insertContent({
            type: this.name,
            content: [{type: 'paragraph'}],
          });
        },
    };
  },
  parseHTML() {
    return [
      {tag: '.pr-box'},
    ];
  },
  renderHTML({HTMLAttributes}) {
    return [
      'div',
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
      0,
    ];
  },
});

  renderHTML({HTMLAttributes}) {
    return [
      'div',
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
      /* ホール（hole）の指定 */
      0,
    ];
  },

.pr-box {
  border: 1px solid black;
  border-radius: 8px;
  padding: 20px;
  
  & > p {
    line-height: 32.4px;
  }
}

export const BoxExtension = Node.create({
  name: 'pr_box',

	...
  
  addKeyboardShortcuts() {
    return {
      Enter({editor}) {
        console.log('on enter!!')

        return false
      }
    }
  }
});

function isInsideBox(editor: Editor) {
  const $head = editor.state.selection.$head;
  for (let depth = $head.depth; depth > 0; depth--) {
    if ($head.node(depth).type.name === BoxExtension.name)
      return $head.node(depth);
  }

  return false;
}

addKeyboardShortcuts() {
    return {
      Enter({editor}) {
        const {selection} = editor.state
        const {$from} = selection

        const boxNode = isInsideBox(editor);

        if (
          boxNode !== false &&
          selection instanceof TextSelection &&
          $from.end() === $from.pos
        ) {
         console.log("囲みのなかでEnterが押された、かつカーソルが段落の中間にある");

         return false
        }

        return false
      }
    }
  }

addKeyboardShortcuts() {
    return {
      Enter({editor}) {
        const {selection} = editor.state
        const {$from} = selection

        const boxNode = isInsideBox(editor);

        if (
          boxNode !== false &&
          /* テキストの最後でEnterが押された時 */
          selection instanceof TextSelection &&
          $from.end() === $from.pos
        ) {
         editor.chain().setTextSelection(selection.from + 1).run();

         return false
        }

        return false
      }
    }
  }

<div class="pr-box"><p>テキスト</p><p>|</p><p>テキスト</p></div>

<div class="pr-box"><p>テキスト</p><p></p>|<p>テキスト</p></div>

<div class="pr-list">
	<div class="pr-list__item">
		<div class="pr-list__item__img">
			<img src="">
		</div>
		<p class="pr-list__item__name"></p>
		<p class="pr-list__item__position"></p>
	</div>
</div>

export const MemberListExtension = Node.create({
  name: 'pr_member_list',
  group: 'block',
  content: 'pr_member_list_item_wrapper{1,4}',
  
  ...
  
  parseHTML() {
    return [
      {
        tag: '.pr-list',
      },
    ];
  },
  renderHTML() {
    return ['div', {class: 'pr-list'}, 0];
  },

  ...

});

export const MemberListItemWrapperExtension = Node.create({
  name: 'pr_member_list_item_wrapper',
  group: 'pr_member_list',
  content:
    '(pr_member_list_image{1} pr_member_list_name{1} pr_member_list_description{1})',

  ...
  
  parseHTML() {
    return [
      {
        tag: '.pr-list__item',
      },
    ];
  },
  renderHTML() {
    return ['div', {class: 'pr-list__item'}, 0];
  },
  addNodeView() {
    return ReactNodeViewRenderer(MemberListItemWrapperNodeView);
  },
});

export const MemberListImageExtension = Node.create({
  name: 'pr_member_list_image',
  group: 'pr_member_list_item_wrapper',
  content: 'block*',

  ...

  parseHTML() {
    return [
      {
        tag: '.pr-list__item__img',
        getAttrs: getMemberListImageNodeAttributes,
      },
    ];
  },
  renderHTML({HTMLAttributes}) {
    const {
      class: wrapperDivClass,
      src,
      imageFileName,
      imageFileNameS3,
      imageClassName,
    } = HTMLAttributes as MemberListImageAttributes;

    const imageAttrs = {
      src,
      'data-fileName': imageFileName,
      'data-fileNameS3': imageFileNameS3,
      class: imageClassName,
    };

    return [
      'div',
      {
        class: wrapperDivClass,
      },
      ['img', mergeAttributes({...imageAttrs})],
    ];
  },
  addNodeView() {
    return ReactNodeViewRenderer(MemberListImageNodeView);
  },
};

export const MemberListNameExtension = Node.create({
  name: 'pr_member_list_name',
  group: 'pr_member_list_item_wrapper',
  content: 'inline*',

	...

  parseHTML() {
    return [
      {
        tag: 'p.pr-list__item__name',
        priority: 51,
      },
    ];
  },
  renderHTML() {
    return [
      'p',
      {
        class: 'pr-list__item__name',
      },
      0,
    ];
  },
});


export const MemberListDescriptionExtension = Node.create({
  name: 'pr_member_list_description',
  group: 'pr_member_list_item_wrapper',
  content: 'inline*',

	...
	
  parseHTML() {
    return [
      {
        tag: 'p.pr-list__item__position',
        priority: 51,
      },
    ];
  },
  renderHTML() {
    return ['p', {class: 'pr-list__item__position'}, 0];
  },
});

/* nodeのtypeごとに設定する文言を指定する */
Placeholder.configure({
  placeholder: ({ node }) => {
    if (node.type.name === 'heading') {
      return 'What’s the title?'
    }

    return 'Can you add some further context?'
  },
})

/* data-placeholder属性にExtensionから設定した文言が設定されるため
　　　　　　CSSからその文言を擬似要素として空文字のpタグに設定する。 */
.tiptap p.is-empty::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

　/* Node viewsによってレンダリングされたHTML */
<div class="react-renderer node-pr_member_list_description is-empty" data-placeholder="本文を入力">
  <div class="css-1yxrigf-wrapper" data-node-view-wrapper="" style="white-space: normal;">
    <div class="pr-list__item__position" data-node-view-content="" style="white-space: pre-wrap;">
      <div style="white-space: inherit;">
        <br class="ProseMirror-trailingBreak">
      </div>
    </div>
  </div>
</div>

/* Tiptapのアウトプット */
<p class="pr-list__item__position"></p>

.node-pr_member_list_description.is-empty {
  .pr-list__item__position {
    > div::before {
      display: flex;
      justify-content: center;
      color: gray;
      content: '肩書を入力';
      height: 0;
      pointer-events: none;
      font-size: 13px;
      font-weight: 300;
    }
  }
}

  addProseMirrorPlugins() {
    return [
      new Plugin({
        key: new PluginKey('placeholder'),
        props: {
          decorations: ({doc, selection}) => {
          
					...

            doc.descendants((node, pos) => {
              const hasAnchor = anchor >= pos && anchor <= pos + node.nodeSize;
              const isEmpty = !node.isLeaf && isNodeEmpty(node);

              if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                const classes = [this.options.emptyNodeClass];

                if (isEmptyDoc) {
                  classes.push(this.options.emptyEditorClass);
                }

                const decoration = Decoration.node(pos, pos + node.nodeSize, {
                  class: classes.join(' '),
                  'data-placeholder':
                    typeof this.options.placeholder === 'function'
                      ? this.options.placeholder({
                          editor: this.editor,
                          node,
                          pos,
                          hasAnchor,
                        })
                      : this.options.placeholder,
                });

                decorations.push(decoration);
              }

              return this.options.includeChildren;
            });

            return DecorationSet.create(doc, decorations);
          },
        },
      }),
    ];
  },

if (
  selection instanceof TextSelection &&
  selection?.$cursor !== null &&
  selection?.$cursor.parent?.isTextblock &&
  selection.$cursor.parent.content.size === 0 &&
  // 表、囲み、画像+テキストの中は表示しない
  !isInsideBox(selection) &&
  !isInTable(selection) &&
  !isInside2ColWithHeader(selection) &&
  !isInside2ColNoHeader(selection)
) {
  const from = selection.$cursor.before();
  const to = selection.$cursor.after();

  const decoration = Decoration.node(from, to, {
    class: 'pr-selected-empty-paragraph',
  });
  decorations.push(decoration);
}

p.is-empty.pr-selected-empty-paragraph::before {
  color: gray;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}