feat: add PowerInput component

packages/web/src/components/PowerInput/utils.ts

@@ -0,0 +1,91 @@
+import { Text, Descendant, Transforms } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact } from 'slate-react';
+
+import type {
+  CustomEditor,
+  CustomElement,
+  VariableElement,
+} from './types';
+
+export const deserialize = (value: string): Descendant[] => {
+  const variableRegExp = /({{.*?}})/g;
+
+  if (!value) return [{
+    type: 'paragraph',
+    children: [{ text: '', }],
+  }];
+
+  return value.split('\n').map(line => {
+    const nodes = line.split(variableRegExp);
+
+    if (nodes.length > 1) {
+      return {
+        type: 'paragraph',
+        children: nodes.map(node => {
+          if (node.match(variableRegExp)) {
+            return {
+              type: 'variable',
+              name: node.replace(/{{|}}/g, ''),
+              children: [{ text: '' }],
+            };
+          }
+
+          return {
+            text: node,
+          };
+        })
+      };
+    }
+
+    return {
+      type: 'paragraph',
+      children: [{ text: line }],
+    }
+  })
+};
+
+export const serialize = (value: Descendant[]): string => {
+  return value.map(node => serializeNode(node)).join('\n');
+};
+
+const serializeNode = (node: CustomElement | Descendant): string => {
+  if (Text.isText(node)) {
+    return node.text;
+  }
+
+  if (node.type === 'variable') {
+    return `{{${node.name}}}`;
+  }
+
+  return node.children.map(n => serializeNode(n)).join('');
+};
+
+export const withVariables = (editor: CustomEditor) => {
+  const { isInline, isVoid } = editor;
+
+  editor.isInline = (element: CustomElement) => {
+    return element.type === 'variable' ? true : isInline(element);
+  }
+
+  editor.isVoid = (element: CustomElement) => {
+    return element.type === 'variable' ? true : isVoid(element);
+  }
+
+  return editor;
+}
+
+export const insertVariable = (editor: CustomEditor, variableData: Pick<VariableElement, "name" | "value">) => {
+  const variable: VariableElement = {
+    type: 'variable',
+    name: variableData.name,
+    value: variableData.value,
+    children: [{ text: '' }],
+  };
+  Transforms.insertNodes(editor, variable);
+  Transforms.move(editor);
+}
+
+export const customizeEditor = (editor: CustomEditor): CustomEditor => {
+  return withVariables(withReact(withHistory(editor)));
+};