@wix/patterns-fields 1.0.0

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.tsx

@@ -0,0 +1,573 @@
+import React from 'react';
+
+import type {
+  ContentBlock,
+  ContentState,
+  DraftHandleValue,
+  DraftBlockType,
+} from 'draft-js';
+import {
+  Editor,
+  EditorState,
+  getDefaultKeyBinding,
+  RichUtils,
+  Modifier,
+  SelectionState,
+} from 'draft-js';
+import {
+  registerCopySource,
+  handleDraftEditorPastedText,
+} from 'draftjs-conductor';
+import { Map } from 'immutable';
+
+import { preventAndStopEvent, containsActiveElement } from '../../../../utils';
+
+import type { CustomStyleMap } from './utils';
+import {
+  blockStyleFn,
+  convertBlockToListItem,
+  removeCurrentBlock,
+  getCurrentBlock,
+  splitAndUnstyleBlock,
+  splitAndCopyInlineBlockType,
+  isListItemBlockType,
+  getPreviousListItemBlock,
+} from './utils';
+import { Toolbar } from './toolbar';
+import { classes } from './rich-editor.st.css.js';
+
+const MAX_DEPTH = 4;
+// "1." or "1 ."
+const STRING_TO_ORDERED_LIST_RE = /^1\s?\.$/;
+// "- "
+const STRING_TO_UNORDERED_LIST_RE = /^-\s$/;
+
+export interface RichEditorProps {
+  readOnly?: boolean;
+  onToggleFullScreen?: () => void;
+  onToolbarMouseDown?: React.MouseEventHandler;
+  customStyleMap: CustomStyleMap;
+  editorState: EditorState;
+  onChange: (editorState: EditorState) => void;
+  isFullScreen?: boolean;
+  headingsEnabled?: boolean;
+  autoFocus?: boolean;
+}
+
+export class RichEditor extends React.Component<RichEditorProps> {
+  public editor: Editor | null = null;
+
+  private root: HTMLElement | null = null;
+
+  private copySource: { unregister: () => void } | null = null;
+
+  private lastSelectionWithFocus: SelectionState | null = null;
+
+  public componentDidMount() {
+    if (this.props.autoFocus) {
+      this.focus();
+    }
+
+    if (this.editor) {
+      this.copySource = registerCopySource(this.editor);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.copySource) {
+      this.copySource.unregister();
+    }
+  }
+
+  componentDidUpdate() {
+    if (!this.copySource && this.editor) {
+      this.copySource = registerCopySource(this.editor);
+    }
+  }
+
+  public render() {
+    const {
+      onToggleFullScreen,
+      isFullScreen,
+      headingsEnabled,
+      editorState,
+      customStyleMap,
+      readOnly,
+    } = this.props;
+
+    return (
+      <div
+        ref={(root) => (this.root = root)}
+        className={classes.root}
+        onKeyDown={this.onKeyDown}
+      >
+        {!readOnly && (
+          <Toolbar
+            isFullScreen={isFullScreen}
+            editorState={editorState}
+            onChangeBlock={this.onChangeBlock}
+            onChangeStyle={this.onChangeStyle}
+            onChangeLink={this.onChangeLink}
+            onChangeAlign={this.onChangeAlign}
+            onClear={this.onClear}
+            onToggleFullScreen={onToggleFullScreen}
+            headingsEnabled={headingsEnabled}
+          />
+        )}
+        <div className={classes.editor}>
+          <Editor
+            ref={(editor) => (this.editor = editor)}
+            readOnly={readOnly}
+            tabIndex={-1}
+            editorState={editorState}
+            stripPastedStyles={false}
+            onChange={this.onChange}
+            customStyleMap={customStyleMap}
+            keyBindingFn={getDefaultKeyBinding}
+            handleKeyCommand={this.handleKeyCommand}
+            blockStyleFn={blockStyleFn}
+            handlePastedText={this.handlePastedText}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  public focus = () => {
+    if (this.root && !containsActiveElement(this.root)) {
+      this.editor?.focus();
+    }
+  };
+
+  private onChange = (baseEditorState: EditorState) => {
+    const editorState = this.applyAdvancedModifications(baseEditorState);
+    const selection = editorState.getSelection();
+
+    if (selection.getHasFocus()) {
+      this.lastSelectionWithFocus = selection;
+    }
+
+    this.props.onChange(editorState);
+  };
+
+  private onKeyDown = (e: React.KeyboardEvent) => {
+    const { editorState, isFullScreen, onToggleFullScreen } = this.props;
+    /**
+     * TODO
+     * Ctrl+k - Link
+     * Ctrl+Shift+L - align:left
+     * Ctrl+Shift+E - align:center
+     * Ctrl+Shift+R - align:right
+     * Ctrl+Shift+J - align:justify
+     * Ctrl+Shift+7 - ordered-list
+     * Ctrl+Shift+8 - unordered-list
+     * Ctrl+Alt+0 - normal text
+     * Ctrl+Alt+1 - header-two
+     * Ctrl+Alt+2 - header-three
+     * Ctrl+\ - clear formatting
+     */
+    switch (e.key) {
+      case 'F11':
+        if (onToggleFullScreen) {
+          e.preventDefault();
+          onToggleFullScreen();
+        }
+        break;
+      case 'Escape':
+        if (isFullScreen && onToggleFullScreen) {
+          onToggleFullScreen();
+        }
+        break;
+      case 'Tab': {
+        const currentBlock = getCurrentBlock(editorState);
+        const isListType = isListItemBlockType(currentBlock.getType());
+
+        if (isListType && e.shiftKey) {
+          this.handleRemoveListIndent(e, editorState);
+          break;
+        }
+
+        if (isListType) {
+          this.handleAddListIndent(e, editorState);
+          break;
+        }
+
+        const nextState = RichUtils.onTab(e, editorState, MAX_DEPTH);
+
+        this.onChange(nextState);
+        break;
+      }
+    }
+  };
+
+  private handleAddListIndent = (
+    event: React.KeyboardEvent,
+    editorState: EditorState,
+  ) => {
+    const currentBlock = getCurrentBlock(editorState);
+    const currentBlockKey = currentBlock.getKey();
+    const previousListItem = getPreviousListItemBlock(
+      editorState,
+      currentBlockKey,
+    );
+
+    if (!previousListItem) {
+      return;
+    }
+
+    const nextEditorState = RichUtils.onTab(event, editorState, MAX_DEPTH);
+
+    const previousListItemDepth = previousListItem.getDepth();
+    const nextDepth = getCurrentBlock(nextEditorState).getDepth();
+
+    // Allow only one level of nesting related to the previous list item
+    if (nextDepth > previousListItemDepth + 1) {
+      return;
+    }
+
+    preventAndStopEvent(event);
+    this.onChange(nextEditorState);
+  };
+
+  private handleRemoveListIndent = (
+    event: React.KeyboardEvent,
+    editorState: EditorState,
+  ) => {
+    const initialBlock = getCurrentBlock(editorState);
+    const initialBlockDepth = initialBlock.getDepth();
+    const initialBlockType = initialBlock.getType();
+
+    if (initialBlockDepth === 0) {
+      return;
+    }
+
+    let nextEditorState = RichUtils.onTab(event, editorState, MAX_DEPTH);
+    let nextContentState = nextEditorState.getCurrentContent();
+
+    const currentBlock = getCurrentBlock(nextEditorState);
+
+    let blockAfter: ContentBlock | undefined = nextContentState.getBlockAfter(
+      currentBlock.getKey(),
+    );
+
+    while (
+      blockAfter &&
+      initialBlockType === blockAfter.getType() &&
+      blockAfter.getDepth() >= initialBlockDepth + 1
+    ) {
+      nextContentState = nextContentState.merge({
+        blockMap: nextContentState
+          .getBlockMap()
+          .set(
+            blockAfter.getKey(),
+            blockAfter.set('depth', blockAfter.getDepth() - 1) as ContentBlock,
+          ),
+      }) as ContentState;
+
+      blockAfter = nextContentState.getBlockAfter(blockAfter.getKey());
+    }
+
+    nextEditorState = EditorState.push(
+      editorState,
+      nextContentState as ContentState,
+      'adjust-depth',
+    );
+
+    preventAndStopEvent(event);
+    this.onChange(nextEditorState);
+  };
+
+  private handlePastedText = (
+    _: string,
+    html: string | undefined,
+    editorState: EditorState,
+  ): DraftHandleValue => {
+    const newState = handleDraftEditorPastedText(_, html, editorState);
+
+    if (newState) {
+      this.onChange(newState);
+      return 'handled';
+    }
+
+    return 'not-handled';
+  };
+
+  private applyAdvancedModifications = (
+    editorState: EditorState,
+  ): EditorState => {
+    const block = getCurrentBlock(editorState);
+    const text = block.getText();
+    const type = block.getType();
+
+    if (STRING_TO_ORDERED_LIST_RE.test(text) && type === 'unstyled') {
+      return convertBlockToListItem(editorState, true);
+    }
+
+    if (STRING_TO_UNORDERED_LIST_RE.test(text) && type === 'unstyled') {
+      return convertBlockToListItem(editorState, false);
+    }
+
+    return editorState;
+  };
+
+  private handleKeyCommand = (
+    command: string,
+    editorState: EditorState,
+  ): DraftHandleValue => {
+    let block: ContentBlock;
+    let nextState: EditorState | null;
+
+    switch (command) {
+      case 'split-block':
+        block = getCurrentBlock(editorState);
+
+        if (block.getType().includes('header')) {
+          nextState = splitAndUnstyleBlock(editorState);
+          return this.completeKeyCommand(nextState);
+        }
+
+        if (isListItemBlockType(block.getType())) {
+          nextState = splitAndCopyInlineBlockType(editorState);
+          return this.completeKeyCommand(nextState);
+        }
+        break;
+      case 'delete':
+      case 'backspace':
+        block = getCurrentBlock(editorState);
+
+        if (!block.getText()) {
+          nextState = removeCurrentBlock(editorState, command);
+          return this.completeKeyCommand(nextState);
+        }
+        break;
+    }
+
+    nextState = RichUtils.handleKeyCommand(editorState, command);
+    return this.completeKeyCommand(nextState);
+  };
+
+  private completeKeyCommand = (editorState: EditorState | null) => {
+    if (editorState) {
+      this.onChange(editorState);
+      return 'handled';
+    }
+    return 'not-handled';
+  };
+
+  private onChangeAlign = (textAlign: string) => {
+    const { editorState } = this.props;
+    const data = Map({ style: { textAlign } });
+
+    const contentState = Modifier.mergeBlockData(
+      editorState.getCurrentContent(),
+      editorState.getSelection(),
+      data,
+    );
+    const nextState = EditorState.push(
+      editorState,
+      contentState,
+      'change-block-data',
+    );
+    this.onChange(nextState);
+  };
+
+  private getSelectedBlocks = (editorState: EditorState) => {
+    const selection = editorState.getSelection();
+    const contentState = editorState.getCurrentContent();
+    const selectedBlocks = [];
+
+    let blockKey = selection.getStartKey();
+    selectedBlocks.push(contentState.getBlockForKey(blockKey));
+
+    while (blockKey !== selection.getEndKey()) {
+      blockKey = contentState.getKeyAfter(blockKey);
+      selectedBlocks.push(contentState.getBlockForKey(blockKey));
+    }
+
+    return selectedBlocks;
+  };
+
+  private onChangeBlock = (value: string) => {
+    let { editorState } = this.props;
+    let contentState = editorState.getCurrentContent();
+    const selectedBlocks = this.getSelectedBlocks(editorState);
+
+    if (selectedBlocks.length) {
+      // if every block have value style then remove it from all
+      // else set every block to value
+      // also remember case when we explicitly trying to unstyle blocks
+      const unstyleBlocks =
+        value === 'unstyled' ||
+        selectedBlocks.every(
+          (block) =>
+            block.getType() === value ||
+            block.getData().get('inlineBlockType', 'unstyled') === value,
+        );
+
+      const toggleListType = isListItemBlockType(value as DraftBlockType);
+
+      selectedBlocks.forEach((block) => {
+        let blockType = block.getType();
+        let inlineBlockType = block
+          .getData()
+          .get('inlineBlockType', 'unstyled') as DraftBlockType;
+
+        let [listType, otherType]: [DraftBlockType, DraftBlockType] =
+          isListItemBlockType(blockType)
+            ? [blockType, inlineBlockType]
+            : ['unstyled', blockType];
+
+        if (unstyleBlocks) {
+          listType = listType === value ? 'unstyled' : listType;
+          otherType = [otherType, 'unstyled'].includes(value)
+            ? 'unstyled'
+            : otherType;
+        } else {
+          if (toggleListType) {
+            listType = value as DraftBlockType;
+          } else {
+            otherType = value as DraftBlockType;
+          }
+        }
+
+        blockType = listType !== 'unstyled' ? listType : otherType;
+        inlineBlockType = listType !== 'unstyled' ? otherType : 'unstyled';
+
+        // create selection for whole block
+        const blockSelection = SelectionState.createEmpty(block.getKey()).set(
+          'focusOffset',
+          block.getLength(),
+        ) as SelectionState;
+
+        contentState = Modifier.setBlockType(
+          contentState,
+          blockSelection,
+          blockType,
+        );
+        contentState = Modifier.mergeBlockData(
+          contentState,
+          blockSelection,
+          Map({ inlineBlockType }),
+        );
+      });
+    }
+
+    editorState = EditorState.push(
+      editorState,
+      contentState,
+      'change-block-type',
+    );
+
+    if (this.lastSelectionWithFocus) {
+      editorState = EditorState.forceSelection(
+        editorState,
+        this.lastSelectionWithFocus,
+      );
+    }
+    this.onChange(editorState);
+  };
+
+  private onChangeStyle = (inlineStyle: string) => {
+    const editorState = RichUtils.toggleInlineStyle(
+      this.props.editorState,
+      inlineStyle,
+    );
+    this.onChange(editorState);
+  };
+
+  private onChangeLink = (link?: string) => {
+    let { editorState } = this.props;
+
+    if (this.lastSelectionWithFocus) {
+      editorState = EditorState.forceSelection(
+        editorState,
+        this.lastSelectionWithFocus,
+      );
+    }
+    let selection = editorState.getSelection();
+    let contentState = editorState.getCurrentContent();
+    let entityKey: string | null = null;
+    this.focus();
+
+    if (link) {
+      // we need to add text when no text is selected
+      if (selection.isCollapsed()) {
+        const anchorOffset = selection.getAnchorOffset();
+        const textEntityKey = contentState
+          .createEntity('PLACEHOLDER', 'IMMUTABLE')
+          .getLastCreatedEntityKey();
+
+        contentState = Modifier.insertText(
+          contentState,
+          selection,
+          link,
+          undefined,
+          textEntityKey,
+        );
+        editorState = EditorState.push(
+          editorState,
+          contentState,
+          'insert-characters',
+        );
+        selection = selection.merge({
+          focusOffset: anchorOffset + link.length,
+          hasFocus: true,
+        }) as SelectionState;
+        editorState = EditorState.forceSelection(editorState, selection);
+        contentState = editorState.getCurrentContent();
+      }
+      contentState = contentState.createEntity('LINK', 'MUTABLE', {
+        url: link,
+      });
+      entityKey = contentState.getLastCreatedEntityKey();
+    }
+    editorState = RichUtils.toggleLink(editorState, selection, entityKey);
+
+    if (!editorState.getCurrentInlineStyle().contains('UNDERLINE')) {
+      editorState = RichUtils.toggleInlineStyle(editorState, 'UNDERLINE');
+    }
+
+    this.onChange(editorState);
+  };
+
+  private onClear = () => {
+    const { editorState, customStyleMap } = this.props;
+    const selection = editorState.getSelection();
+    // clear inline styles
+    const styles = [
+      'BOLD',
+      'ITALIC',
+      'UNDERLINE',
+      'STRIKETHROUGH',
+      'CODE',
+    ].concat(Object.keys(customStyleMap));
+    let contentWithoutStyles = styles.reduce(
+      (contentState, style) =>
+        Modifier.removeInlineStyle(contentState, selection, style),
+      editorState.getCurrentContent(),
+    );
+
+    // clear inline styles applied to blocks (backward compatibility)
+    contentWithoutStyles = Modifier.setBlockData(
+      contentWithoutStyles,
+      selection,
+      Map(),
+    );
+
+    // remove all entities like links
+    contentWithoutStyles = Modifier.applyEntity(
+      contentWithoutStyles,
+      selection,
+      null,
+    );
+
+    // clear blocks
+    let nextState = EditorState.push(
+      editorState,
+      contentWithoutStyles,
+      'change-inline-style',
+    );
+    nextState = RichUtils.toggleBlockType(nextState, 'unstyled');
+    this.onChange(nextState);
+  };
+}

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css

@@ -0,0 +1,100 @@
+@property st-global(--wds-color-blue-100);
+@property st-global(--wds-color-blue-300);
+@property st-global(--wds-color-red-100);
+@property st-global(--wds-color-red-300);
+@property st-global(--wds-color-yellow-100);
+@property st-global(--wds-color-yellow-300);
+@property st-global(--wds-color-black-700);
+@property st-global(--wds-input-shadow-focus-standard);
+@property st-global(--wds-border-radius-300);
+
+/* Cannot import Editor from rich-editor.st.css - causes Stylable build error
+:import {
+    -st-from: "./rich-editor.st.css";
+    -st-default: Editor;
+}
+*/
+
+.root {
+    -st-states:
+        border(enum(standard, none)),
+        status(enum(error, warning));
+
+    width: 100%;
+    box-sizing: border-box;
+    outline: 0;
+    overflow: hidden;
+    border-radius: var(--wds-border-radius-300);
+}
+
+.root:border(none) {
+    border: none;
+}
+.root:border(standard) {
+    border: 1px solid var(--wds-color-blue-300);
+}
+.root:border(standard):focus,
+.root:border(standard):focus-within {
+    border: 1px solid var(--wds-color-blue-100);
+    box-shadow: var(--wds-input-shadow-focus-standard);
+}
+
+.root:border(standard):status(error) {
+    border: 1px solid var(--wds-color-red-100);
+}
+.root:border(standard):status(error):focus,
+.root:border(standard):status(error):focus-within {
+    border: 1px solid var(--wds-color-red-100);
+    box-shadow: 0 0 0 3px var(--wds-color-red-300);
+}
+
+.root:border(standard):status(warning) {
+    border: 1px solid var(--wds-color-yellow-100);
+}
+.root:border(standard):status(warning):focus,
+.root:border(standard):status(warning):focus-within {
+    border: 1px solid var(--wds-color-yellow-100);
+    box-shadow: 0 0 0 3px var(--wds-color-yellow-300);
+}
+
+.nativeInput {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    width: 0;
+    height: 0;
+}
+
+.editor {
+    -st-states: isFullScreen;
+    height: auto;
+    line-height: auto;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 234px;
+    overflow: hidden;
+    box-sizing: border-box;
+    flex-direction: row;
+    border-radius: var(--wds-border-radius-300);
+}
+.editor:isFullScreen {
+    max-width: 782px;
+    min-width: 582px;
+    background: var(--wds-color-black-700);
+}
+/* Cannot use Editor import - causes Stylable build error
+.editor:isFullScreen Editor::editor {
+    width: 582px;
+    align-self: center;
+}
+*/
+.editor:not(:isFullScreen) {
+    max-height: 80vh;
+}
+.editor > div {
+    flex: 1;
+    max-width: 100%;
+}

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "richtexteditor635921938";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"richtexteditor635921938__root","nativeInput":"richtexteditor635921938__nativeInput","editor":"richtexteditor635921938__editor"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-blue-100":"--wds-color-blue-100","wds-color-blue-300":"--wds-color-blue-300","wds-color-red-100":"--wds-color-red-100","wds-color-red-300":"--wds-color-red-300","wds-color-yellow-100":"--wds-color-yellow-100","wds-color-yellow-300":"--wds-color-yellow-300","wds-color-black-700":"--wds-color-black-700","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","wds-border-radius-300":"--wds-border-radius-300"}; 
+
+
+
+