@douyinfe/semi-ui/lib/es/aiChatInput/extension/inputSlot/index.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import { Node, mergeAttributes } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react';
import Component from './component';
import { getCustomSlotAttribute } from '@douyinfe/semi-foundation/lib/es/aiChatInput/utils';
import { ensureTrailingText, keyDownHandlePlugin } from '../plugins';
export const REACT_COMPONENT_NODE_NAME = 'inputSlot';
export default Node.create({
  name: 'inputSlot',
  group: 'inline',
  inline: true,
  // Allow text and other inline nodes inside
  content: 'inline*',
  // Allow editing
  atom: false,
  selectable: true,
  draggable: false,
  parseHTML() {
    return [{
      tag: 'input-slot',
      getAttrs: element => ({
        placeholder: element.getAttribute('placeholder')
      })
    }];
  },
  renderHTML(_ref) {
    let {
      HTMLAttributes
    } = _ref;
    return ['input-slot', mergeAttributes(HTMLAttributes), 0];
  },
  addAttributes() {
    return {
      placeholder: {
        default: '',
        parseHTML: element => element.getAttribute('placeholder') || '',
        renderHTML: attributes => ({
          'placeholder': attributes.placeholder
        })
      },
      isCustomSlot: getCustomSlotAttribute()
    };
  },
  addNodeView() {
    return ReactNodeViewRenderer(Component, {
      update: _ref2 => {
        let {
          oldNode,
          newNode,
          updateProps
        } = _ref2;
        if (newNode.type !== oldNode.type) {
          return false;
        }
        if (this.editor.view.composing) {
          // Keep the live composition DOM untouched while IME is active.
          return true;
        }
        updateProps();
        return true;
      }
    });
  },
  addProseMirrorPlugins() {
    return [ensureTrailingText(this.editor.schema), keyDownHandlePlugin(this.editor.schema)];
  }
});