draftail-text-utils 0.1.7__py3-none-any.whl

draftail_text_utils/static/draftail_text_utils/js/highlight_color.js

@@ -0,0 +1,350 @@
+// https://github.com/wagtail/draftail/blob/main/src/components/Toolbar/ToolbarButton.tsx
+// export interface ToolbarButtonProps {
+//   name?: string;
+//   active?: boolean;
+//   label?: string | null;
+//   title?: string | null;
+//   icon?: IconProp | null;
+//   className?: string | null;
+//   tooltipDirection?: "up" | "down";
+//   onClick?: ((name: string) => void) | null;
+// }
+
+// CSS Color Component
+// https://github.com/argyleink/css-color-component
+
+(function () {
+  var React = window.React;
+  var RichUtils = window.DraftJS.RichUtils;
+  var Modifier = window.DraftJS.Modifier;
+  var EditorState = window.DraftJS.EditorState;
+  var ToolbarButton = window.Draftail.ToolbarButton;
+  var data = window.draftailTextUtils || {};
+
+  // Build options from config
+  var options = data.customHighlightColors || [];
+  var optMap = data.customHighlightColorStyleMap || {};
+
+  var savedSelection = null;
+
+  const entityType = 'HIGHLIGHT_COLOR';
+  const controlType = 'highlight-color';
+  const control = JSON.parse(
+    document.getElementById(`draftail-plugin-control-${controlType}`)
+      .textContent,
+  );
+
+  function removeHighlightColorEntity(editorState) {
+    var selection = editorState.getSelection();
+    if (!selection.getHasFocus()) return editorState;
+
+    var contentWithoutEntity = Modifier.applyEntity(
+      editorState.getCurrentContent(),
+      selection,
+      null, // null removes entity
+    );
+
+    return EditorState.push(editorState, contentWithoutEntity, 'apply-entity');
+  }
+
+  function saveSelection(getEditorState) {
+    const selection = getEditorState().getSelection();
+    if (selection && !selection.isCollapsed()) {
+      savedSelection = selection;
+    }
+  }
+
+  function restoreSelection(editorState) {
+    if (savedSelection && !savedSelection.isCollapsed()) {
+      return EditorState.forceSelection(editorState, savedSelection);
+    }
+    return editorState;
+  }
+
+  // Helper to find active color
+  function getActiveHighlightColor(editorState) {
+    var selection = editorState.getSelection();
+    if (!selection.getHasFocus()) return null;
+
+    var contentState = editorState.getCurrentContent();
+    var startKey = selection.getStartKey();
+    var startOffset = selection.getStartOffset();
+    var blockWithEntityAt = contentState.getBlockForKey(startKey);
+
+    // Check entity at cursor position
+    var entityKey = blockWithEntityAt.getEntityAt(startOffset);
+    if (entityKey) {
+      var entity = contentState.getEntity(entityKey);
+      if (entity.getType() === entityType) {
+        return entity.getData().backgroundColor;
+      }
+    }
+
+    // If selection is collapsed, also check character before (so styling after typing works)
+    if (selection.isCollapsed() && startOffset > 0) {
+      entityKey = blockWithEntityAt.getEntityAt(startOffset - 1);
+      if (entityKey) {
+        var entity = contentState.getEntity(entityKey);
+        if (entity.getType() === entityType) {
+          return entity.getData().backgroundColor;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  // The control component
+  var HighlightColorControl = class HighlightColorControl
+    extends React.Component
+  {
+    constructor(props) {
+      super(props); // getEditorState, onChange
+      this.state = {
+        isDropdownOpen: false,
+        inputValue: '',
+        isInputFocused: false,
+      };
+      this.controlRef = React.createRef();
+    }
+
+    // lifecycle
+    componentDidMount() {
+      this.syncInputValue();
+      document.addEventListener('mousedown', this.handleClickOutside);
+
+      // Listen to CSS Color Component events
+      var inputEl = document.querySelector('#Draftail--highlight-color-input');
+      if (inputEl) {
+        inputEl.addEventListener('open', this.handleInputFocus);
+        inputEl.addEventListener('close', this.handleInputBlur);
+        inputEl.addEventListener('change', this.handleInputChange);
+      }
+    }
+
+    componentWillUnmount() {
+      document.removeEventListener('mousedown', this.handleClickOutside);
+
+      // Unsubscribe from CSS Color Component events
+      var inputEl = document.querySelector('#Draftail--highlight-color-input');
+      if (inputEl) {
+        inputEl.removeEventListener('open', this.handleInputFocus);
+        inputEl.removeEventListener('close', this.handleInputBlur);
+        inputEl.removeEventListener('change', this.handleInputChange);
+      }
+    }
+
+    componentDidUpdate() {
+      this.syncInputValue();
+    }
+
+    // helpers
+    getActiveHighlightColor() {
+      return getActiveHighlightColor(this.props.getEditorState());
+    }
+
+    syncInputValue() {
+      // While the user is editing, never overwrite their input
+      if (this.state.isInputFocused || this.state.isDropdownOpen) {
+        return;
+      }
+
+      var activeHighlightColor = this.getActiveHighlightColor();
+      var newValue = activeHighlightColor || '';
+
+      if (this.state.inputValue !== newValue) {
+        this.setState({ inputValue: newValue });
+      }
+    }
+
+    toggleDropdown(force) {
+      const willBeOpen =
+        typeof force === 'boolean' ? force : !this.state.isDropdownOpen;
+      if (willBeOpen && !this.state.isDropdownOpen) {
+        saveSelection(this.props.getEditorState);
+      }
+      this.setState({ isDropdownOpen: willBeOpen });
+    }
+
+    applyHighlightColor(newColor) {
+      var backgroundColor = newColor === 'transparent' ? '#00000000' : newColor;
+      var editorState = restoreSelection(this.props.getEditorState());
+      var currentColor = this.getActiveHighlightColor(editorState);
+      editorState = removeHighlightColorEntity(editorState);
+
+      if (backgroundColor === currentColor) {
+        // Re-sync the input value
+        this.props.onChange(editorState);
+        this.setState({ isDropdownOpen: false, inputValue: '' });
+        this.syncInputValue();
+        return;
+      }
+
+      var selection = editorState.getSelection();
+
+      // Apply the entity to the selection
+      var contentWithEntity = editorState
+        .getCurrentContent()
+        .createEntity(entityType, 'MUTABLE', {
+          backgroundColor,
+        });
+      var contentStateWithEntity = Modifier.applyEntity(
+        contentWithEntity,
+        selection,
+        contentWithEntity.getLastCreatedEntityKey(),
+      );
+      var newContent = EditorState.push(
+        editorState,
+        contentStateWithEntity,
+        'apply-entity',
+      );
+      this.props.onChange(newContent);
+
+      // Re-sync the input value
+      this.setState({
+        isDropdownOpen: false,
+        inputValue: String(backgroundColor),
+      });
+      this.syncInputValue();
+    }
+
+    handleInputFocus = () => {
+      saveSelection(this.props.getEditorState);
+      this.setState({ isInputFocused: true });
+      if (!this.state.isDropdownOpen) {
+        this.setState({ isDropdownOpen: true });
+      }
+    };
+
+    handleInputBlur = () => {
+      // When leaving the field, clear the focus flag and re‑sync (will clear if no style)
+      this.setState({ isInputFocused: false }, () => {
+        this.syncInputValue();
+      });
+    };
+
+    handleInputChange = (e) => {
+      this.applyHighlightColor(e.detail.value);
+    };
+
+    handleInputKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        this.toggleDropdown(false);
+        this.syncInputValue();
+        return;
+      }
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.applyHighlightColor(this.state.inputValue);
+        return;
+      }
+    };
+
+    handleClickOutside = (event) => {
+      if (
+        this.controlRef.current &&
+        !this.controlRef.current.contains(event.target)
+      ) {
+        this.setState({ isDropdownOpen: false, isInputFocused: false });
+        var inputEl = document.querySelector(
+          '#Draftail--highlight-color-input',
+        );
+        if (inputEl) {
+          inputEl.close();
+        }
+      }
+    };
+
+    createOptElement = (opt) => {
+      return React.createElement(
+        'li',
+        {
+          key: `HIGHLIGHT_COLOR_OPT_${opt.key.toUpperCase()}`,
+          className: 'Draftail--highlight-color-option-wrapper',
+        },
+        React.createElement(ToolbarButton, {
+          name: opt.value === 'transparent' ? '#00000000' : opt.value,
+          active: this.getActiveHighlightColor() === opt.value,
+          title: opt.label,
+          label: '\u2713',
+          tooltipDirection: 'up',
+          className: 'Draftail--highlight-color-option',
+          onClick: () => this.applyHighlightColor(opt.value),
+        }),
+      );
+    };
+
+    // render
+    render() {
+      const icon = `#icon-${control.icon}`;
+
+      var activeHighlightColor = this.getActiveHighlightColor();
+      var inputDisplay = this.state.inputValue;
+      var isDropdownExpanded = this.state.isDropdownOpen;
+
+      var input = React.createElement(
+        'li',
+        {
+          'key': 'HIGHLIGHT_COLOR_CTRL_INPUT_WRAPPER',
+          'className': 'Draftail--highlight-color-input-wrapper',
+          'data-draftail-balloon': 'down',
+          'aria-label': 'Select custom highlight color',
+        },
+        React.createElement('color-input', {
+          key: 'HIGHLIGHT_COLOR_CTRL_INPUT',
+          id: 'Draftail--highlight-color-input',
+          className: 'Draftail--highlight-color-input',
+          defaultValue: activeHighlightColor || '#000000',
+          value: inputDisplay || '#000000',
+          onKeyDown: this.handleInputKeyDown,
+        }),
+      );
+
+      var hr = React.createElement('hr', {
+        key: 'HIGHLIGHT_COLOR_CTRL_HR',
+        className: 'Draftail--highlight-color-hr',
+      });
+
+      var dropdown = React.createElement(
+        'ul',
+        {
+          'id': 'Draftail--highlight-color-dropdown',
+          'className': 'Draftail--highlight-color-dropdown',
+          'aria-expanded': isDropdownExpanded,
+        },
+        options.map(this.createOptElement),
+        hr,
+        input,
+      );
+
+      // ── Toolbar button ──
+      var button = React.createElement(ToolbarButton, {
+        name: control.type.toUpperCase(),
+        active: !!activeHighlightColor,
+        title: control.label,
+        icon: icon,
+        tooltipDirection: 'up',
+        onClick: () => this.toggleDropdown(),
+      });
+
+      return React.createElement(
+        'div',
+        {
+          key: 'HIGHLIGHT_COLOR_CTRL',
+          className: 'Draftail--highlight-color-control',
+          ref: this.controlRef,
+        },
+        dropdown,
+        button,
+      );
+    }
+  };
+  window.draftail.registerPlugin(
+    {
+      type: control.type,
+      inline: HighlightColorControl,
+    },
+    'controls',
+  );
+})();

draftail_text_utils/static/draftail_text_utils/js/highlight_color_entity.js

@@ -0,0 +1,43 @@
+/**
+ * Highlight color entity for Draftail.
+ * Registers an entity type (HIGHLIGHT_COLOR) that stores an arbitrary highlight color.
+ * The entity is applied by `highlight-color` control when a custom highlight color is entered.
+ * See:`src/draftail_text_utils/static/draftail_text_utils/js/highlight_color.js`
+ */
+(function () {
+  const React = window.React;
+  const ENTITY_TYPE = 'HIGHLIGHT_COLOR';
+  const STYLE_KEY = 'style';
+  const DATASET_KEY = 'data-entity-type';
+
+  const HighlightColorDecorator = ({ children, contentState, entityKey }) => {
+    const entity = contentState.getEntity(entityKey);
+    const { backgroundColor: entityColor } = entity.getData();
+    if (!entityColor) return children;
+
+    const backgroundColor =
+      entityColor == 'transparent' ? '#00000000' : entityColor;
+    return React.createElement(
+      'span',
+      {
+        [STYLE_KEY]: { backgroundColor },
+        [DATASET_KEY]: ENTITY_TYPE,
+      },
+      children,
+    );
+  };
+
+  const HighlightColorSource = ({ onClose }) => {
+    onClose();
+    return null;
+  };
+
+  window.draftail.registerPlugin(
+    {
+      type: ENTITY_TYPE,
+      source: HighlightColorSource,
+      decorator: HighlightColorDecorator,
+    },
+    'entityTypes',
+  );
+})();

draftail_text_utils/static/draftail_text_utils/js/text_alignment.js

@@ -0,0 +1,139 @@
+// https://github.com/wagtail/draftail/blob/main/src/components/Toolbar/ToolbarButton.tsx
+// export interface ToolbarButtonProps {
+//   name?: string;
+//   active?: boolean;
+//   label?: string | null;
+//   title?: string | null;
+//   icon?: IconProp | null;
+//   className?: string | null;
+//   tooltipDirection?: "up" | "down";
+//   onClick?: ((name: string) => void) | null;
+// }
+
+(function () {
+  var React = window.React;
+  var RichUtils = window.DraftJS.RichUtils;
+  var ToolbarButton = window.Draftail.ToolbarButton;
+  var data = window.draftailTextUtils || {};
+  const type_ = 'text-alignment';
+  const control = JSON.parse(
+    document.getElementById(`draftail-plugin-control-${type_}`).textContent,
+  );
+  const options = control.data || [];
+
+  // ── Helper to find active text alignment ──
+  function getActiveOption(editorState) {
+    const selection = editorState.getSelection();
+    const block = editorState
+      .getCurrentContent()
+      .getBlockForKey(selection.getStartKey());
+    const blockType = block.getType();
+    return options.find((opt) => opt.type === blockType) || null;
+  }
+
+  class TextAlignmentControl extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        isOpen: false,
+      };
+      this.controlRef = React.createRef();
+    }
+
+    componentDidMount() {
+      document.addEventListener('mousedown', this.handleClickOutside);
+    }
+
+    componentWillUnmount() {
+      document.removeEventListener('mousedown', this.handleClickOutside);
+    }
+
+    // ── close dropdown when clicking outside ──
+    handleClickOutside = (event) => {
+      if (
+        this.controlRef.current &&
+        !this.controlRef.current.contains(event.target)
+      ) {
+        this.setState({ isOpen: false });
+      }
+    };
+
+    // ── toggle dropdown (used by button) ──
+    toggleDropdown = (force) => {
+      this.setState((prevState) => ({
+        isOpen: typeof force === 'boolean' ? force : !prevState.isOpen,
+      }));
+    };
+
+    // ── apply a text alignment ──
+    handleOptionClick = (opt) => {
+      const { getEditorState, onChange } = this.props;
+      const editorState = getEditorState();
+      const newState = RichUtils.toggleBlockType(editorState, opt.type);
+      onChange(newState);
+      this.setState({ isOpen: false });
+    };
+
+    render() {
+      const { getEditorState } = this.props;
+      const editorState = getEditorState();
+      const activeOption = getActiveOption(editorState);
+      const isOpen = this.state.isOpen;
+      const icon = `#icon-${activeOption ? activeOption.icon : control.icon}`;
+
+      // ── Dropdown list ──
+      const dropdown = React.createElement(
+        'ul',
+        {
+          'className': 'Draftail--text-alignment-dropdown',
+          'aria-expanded': isOpen,
+        },
+        options.map((opt) =>
+          React.createElement(
+            'li',
+            {
+              key: opt.type,
+            },
+            React.createElement(ToolbarButton, {
+              name: opt.type.toUpperCase(),
+              active: activeOption ? activeOption.type === opt.type : false,
+              title: opt.label,
+              className: 'Draftail--text-alignment-option',
+              icon: `#icon-${opt.icon}`,
+              tooltipDirection: 'up',
+              onClick: () => this.handleOptionClick(opt),
+            }),
+          ),
+        ),
+      );
+
+      // ── Toolbar button ──
+      const button = React.createElement(ToolbarButton, {
+        name: control.type.toUpperCase(),
+        active: !!activeOption,
+        title: control.label,
+        icon: icon,
+        tooltipDirection: 'up',
+        onClick: () => this.toggleDropdown(),
+      });
+
+      return React.createElement(
+        'div',
+        {
+          className: 'Draftail--text-alignment-control',
+          ref: this.controlRef,
+        },
+        dropdown,
+        button,
+      );
+    }
+  }
+
+  window.draftail.registerPlugin(
+    {
+      type: control.type,
+      inline: TextAlignmentControl,
+    },
+    'controls',
+  );
+})();