[Registros médicos electrónicos] 1-Personalizar el complemento de línea divisoria de complementos de pizarra

fondo

Para el proyecto se selecciona y adopta la tecnología de registros médicos electrónicos slate, y su uso slate-pluginsacelera la eficiencia del desarrollo. Este artículo describe principalmente cómo slate-pluginsdesarrollar complementos personalizados en formato . Tomemos como ejemplo el componente de la línea divisoria.

Desarrollo de componentes

La estructura del directorio es la siguiente.

├── plugins
│   ├── line   逻辑组件
│   │   ├── createLinePlugin.ts
│   │   ├── defaults.ts
│   │   ├── index.ts
│   │   └── withLine.ts
│   └── line-ui 样式组件
│       ├── LineElement
│       ├── ToolBarLine
│       └── index.ts

El complemento adopta un método de desarrollo que separa la lógica y el estilo.

Línea de componentes lógicos

line/El código para el comportamiento lógico del componente se almacena en la carpeta. El núcleo es devolver una SlatePluginfunción.

export interface SlatePlugin<T extends SPEditor = SPEditor> extends Partial<DOMHandlers<T>> {
    /**
     * @see {@link Decorate}
     */
    decorate?: Decorate<T>;
    /**
     * @see {@link DeserializeHtml}
     */
    deserialize?: Deserialize<T>;
    /**
     * Inline element types.
     */
    inlineTypes?: (editor: T) => string[];
    /**
     * @see {@link OnChange}
     */
    onChange?: OnChange<T>;
    /**
     * Plugin keys to support configuration.
     */
    pluginKeys?: string | string[];
    /**
     * @see {@link RenderElement}
     */
    renderElement?: RenderElement<T>;
    /**
     * @see {@link RenderLeaf}
     */
    renderLeaf?: RenderLeaf<T>;
    /**
     * @see {@link SerializeHtml}
     */
    serialize?: Serialize;
    /**
     * Void element types.
     */
    voidTypes?: (editor: T) => string[];
    /**
     * Editor method overriders.
     */
    withOverrides?: WithOverride | WithOverride[];
}

Toda la lógica de comportamiento de un componente se puede desarrollar en forma de un único archivo y finalmente createLinePlugin.tsexportarse por métodos.

// createLinePlugin.ts

import {
  getRenderElement,
  // eslint-disable-next-line no-unused-vars
  getSlatePluginTypes,
  SlatePlugin
} from '@udecode/slate-plugins-core'
import { ELEMENT_LINE } from './defaults'
import { withLine } from './withLine'

export const createLinePlugin = (): SlatePlugin => ({
  pluginKeys: ELEMENT_LINE,
  renderElement: getRenderElement(ELEMENT_LINE),
  voidTypes: getSlatePluginTypes(ELEMENT_LINE),
  withOverrides: withLine()
})

El método especifica la función de representación del componente type, editorla anulación del método de serialize, deserializeetc.

Los index.tsarchivos son generados automáticamente por barrilesby , que puede exportar fácilmente todos los métodos y variables y son fáciles de consultar.

barrelsby -d "you dirPath" -n -q -S

/**
 * @file Automatically generated by barrelsby.
 */

export * from './createLinePlugin'
export * from './defaults'
export * from './withLine'

Línea de componente de estilo-ui

El componente de estilo se divide principalmente en dos partes.

Función de renderizado de componentes

Esa es la función de renderizado, simplemente renderiza el componente deseado y el contenido del estilo se LineElement.styles.tsdefine en . El marco de estilo utilizado es Component-Styling.

// LineElement.tsx

import * as React from 'react'
import {
  ClassName,
  getRootClassNames,
  RootStyleSet,
  StyledElementProps
} from '@udecode/slate-plugins-ui-fluent'
import { styled } from '@uifabric/utilities'
import { getLineElementStyles } from './LineElement.styles'

const getClassNames = getRootClassNames()

export const LineElementBase = ({
  attributes,
  children,
  className,
  styles
}: StyledElementProps) => {
  const classNames = getClassNames(styles, {
    className
    // Other style props
  })

  return (
    <div {...attributes} className={classNames.root}>
      {children}
    </div>
  )
}

/**
 * BlockElement
 */
export const LineElement = styled<
  StyledElementProps,
  ClassName,
  RootStyleSet
>(LineElementBase, getLineElementStyles, undefined, {
  scope: 'BlockElement'
})

función de representación de la barra de herramientas

El código principal es ToolbarLink.tsxun archivo y exporta un Toolbarcomponente colocado en Aquí puede definir la interacción de la barra de herramientas, como hacer clic para insertar, resaltar el estado, etc.

// ToolbarLink.tsx

import * as React from 'react'
import {
  insertNodes
} from '@udecode/slate-plugins-common'
import {
  getSlatePluginType,
  useEventEditorId,
  TElement,
  useStoreEditorState
} from '@udecode/slate-plugins-core'
import {
  ToolbarButton,
  ToolbarButtonProps
} from '@udecode/slate-plugins-toolbar'
import { Editor, Transforms } from 'slate'
import { ELEMENT_LINE } from '../../line'
export interface ToolbarLineProps extends ToolbarButtonProps {}

export const ToolbarLine = ({ getLinkUrl, ...props }: ToolbarLineProps) => {
  const editor = useStoreEditorState(useEventEditorId('focus'))

  return (
    <ToolbarButton
      onMouseDown={async (event) => {
        if (!editor) return
        // 跳到前一个元素
        const afterPath = Editor.after(editor, editor.selection, { unit: 'block' })
        event.preventDefault()
        // 插入一个line 元素   光标移动到下一行
        insertNodes<TElement>(editor, {
          type: ELEMENT_LINE,
          children: [{ text: '' }],
          at: afterPath
        })
        const pPath = Editor.after(editor, editor.selection)
        insertNodes<TElement>(editor, {
          type: 'p',
          children: [{ text: '' }],
          at: pPath
        })
        Transforms.select(editor, pPath)
        Transforms.collapse(editor, {
          edge: 'start'
        })
      }}
      {...props}
    />
  )
}

Introducir componentes

Introducción de componentes lógicos.

Después de completar el desarrollo de componentes lógicos y componentes de estilo, incluso si se desarrolla un componente, ¿cómo debemos introducir componentes modificados? El método es el mismo que introducir slate-pluginssu propio componente.

Al inicializar SlatePlugins, pluginssimplemente llame a la función exportada en .

...

const pluginsMemo = useMemo(() => {
    const plugins = [
      ...
      createLinePlugin()
      ...
    ]
    return plugins
  }, [])
    
...
<SlatePlugins
    plugins={pluginsMemo}
    components={components}
    ...
  >
  ....
</SlatePlugins>

Después de completar las operaciones anteriores, puede agregar el componente lógico al editor.

Introducción de componentes de estilo.

Introducción al estilo del componente

Al inicializar SlatePlugins, también hay un componentsparámetro que se utiliza para representar el elemento correctamente.

import { ELEMENT_LINE } from './plugins/line'

const components = withStyledPlaceHolders(
  createSlatePluginsComponents({
    [ELEMENT_H1]: withProps(StyledElement, {
      styles: {
        root: {
          color: '#000'
        }
      }
    }),
    [ELEMENT_LINE]: LineElement  // 加入分割线组件
  })
)

<SlatePlugins
    plugins={pluginsMemo}
    components={components}
    ...
  >
  ....
</SlatePlugins>

Lo anterior completa la representación del componente.

Introducción del componente de la barra de herramientas.

import { ToolbarLine } from './plugins/line-ui'

export const ToolbarButtons = () => {
  return (
    <>
      <ToolbarElement type={getSlatePluginType(editor, ELEMENT_H1)} icon={<LooksOne />} />
      <ToolbarLine icon={<FileBreak />} />
    </>
  )
}

Simplemente introduzca el componente que desarrollamos en el componente de la barra de herramientas.

encima

comparte la próxima vez