RefNode SourceCode

[sheason2019]

RefNode SourceCode

import { Node, mergeAttributes, NodeViewRendererProps } from "@tiptap/core";
import { ReactNodeViewRenderer, NodeViewWrapper } from "@tiptap/react";
import cx from "classnames";

export const RefNode = Node.create({
  name: "ref-node",
  group: "inline",
  inline: true,
  selectable: true,
  atom: true,
  parseHTML() {
    return [
      {
        tag: "ref-node",
      },
    ];
  },
  addAttributes() {
    return {
      id: {
        default: null,
        parseHTML(element) {
          return element.getAttribute("id");
        },
        renderHTML(attributes) {
          return {
            id: attributes.id,
          };
        },
      },
    };
  },
  renderHTML({ HTMLAttributes }) {
    return [
      "ref-node",
      mergeAttributes(HTMLAttributes, { id: HTMLAttributes.id }),
    ];
  },
  addNodeView() {
    return ReactNodeViewRenderer(RefNodeRenderer);
  },
});

const RefNodeRenderer = (
  props: NodeViewRendererProps & { selected: boolean }
) => {
  const id = props.node.attrs.id;
  const selected = props.selected;

  const editable = props.editor.isEditable;

  const handleClick = () => {
    console.log("edit reply hook")
  };

  return (
    <NodeViewWrapper as="span">
      <div
        className={cx(
          "bg-blue-200 rounded-full select-none",
          "inline-flex items-center pr-2 mx-1 shadow",
          "outline-blue-400 outline-2 cursor-pointer",
          {
            outline: selected,
          }
        )}
      >
        <div className="px-4 py-2 bg-blue-400 rounded-full shadow">回复</div>
        <div className="py-1 px-2">Document {id}</div>
        {editable && (
          <div className="mx-2" onClick={handleClick}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              viewBox="0 0 16 16"
            >
              <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z" />
            </svg>
          </div>
        )}
      </div>
    </NodeViewWrapper>
  );
};