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

draftail_text_utils/static/draftail_text_utils/js/text_color.js

@@ -0,0 +1,343 @@
+// 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.customTextColors || [];
+  var optMap = data.customTextColorStyleMap || {};
+
+  var savedSelection = null;
+
+  const entityType = 'TEXT_COLOR';
+  const controlType = 'text-color';
+  const control = JSON.parse(
+    document.getElementById(`draftail-plugin-control-${controlType}`)
+      .textContent,
+  );
+
+  function removeTextColorEntity(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 getActiveColor(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().color;
+      }
+    }
+
+    // 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().color;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  // The control component
+  var TextColorControl = class TextColorControl extends React.Component {
+    constructor(props) {
+      super(props); // getEditorState, onChange
+      this.state = {
+        isDropdownOpen: false,
+        inputValue: '#000000',
+        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--text-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--text-color-input');
+      if (inputEl) {
+        inputEl.removeEventListener('open', this.handleInputFocus);
+        inputEl.removeEventListener('close', this.handleInputBlur);
+        inputEl.removeEventListener('change', this.handleInputChange);
+      }
+    }
+
+    componentDidUpdate() {
+      this.syncInputValue(); // always runs, but guarded internally
+    }
+
+    // helpers
+    getActiveColor() {
+      return getActiveColor(this.props.getEditorState());
+    }
+
+    syncInputValue() {
+      // While the user is editing, never overwrite their input
+      if (this.state.isInputFocused || this.state.isDropdownOpen) {
+        return;
+      }
+
+      var activeColor = this.getActiveColor();
+      var newValue = activeColor || '';
+
+      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 });
+    }
+
+    applyTextColor(newColor) {
+      var color = newColor === 'transparent' ? '#00000000' : newColor;
+      var editorState = restoreSelection(this.props.getEditorState());
+      var currentColor = this.getActiveColor(editorState);
+      editorState = removeTextColorEntity(editorState);
+
+      if (color === currentColor) {
+        // Re-sync the input value
+        this.props.onChange(editorState);
+        this.setState({ isDropdownOpen: false, inputValue: '#000000' });
+        this.syncInputValue();
+        return;
+      }
+
+      var selection = editorState.getSelection();
+
+      // Apply the entity to the selection
+      var contentWithEntity = editorState
+        .getCurrentContent()
+        .createEntity(entityType, 'MUTABLE', {
+          color,
+        });
+      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(color) });
+      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.applyTextColor(e.detail.value);
+    };
+
+    handleInputKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        this.toggleDropdown(false);
+        this.syncInputValue();
+        return;
+      }
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.applyTextColor(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--text-color-input');
+        if (inputEl) {
+          inputEl.close();
+        }
+      }
+    };
+
+    createOptElement = (opt) => {
+      return React.createElement(
+        'li',
+        {
+          key: `TEXT_COLOR_OPT_${opt.key.toUpperCase()}`,
+          className: 'Draftail--text-color-option-wrapper',
+        },
+        React.createElement(ToolbarButton, {
+          name: opt.value === 'transparent' ? '#00000000' : opt.value,
+          active: this.getActiveColor() === opt.value,
+          title: opt.label,
+          label: '\u2713',
+          tooltipDirection: 'up',
+          className: 'Draftail--text-color-option',
+          onClick: () => this.applyTextColor(opt.value),
+        }),
+      );
+    };
+
+    // render
+    render() {
+      const icon = `#icon-${control.icon}`;
+
+      var activeColor = this.getActiveColor();
+      var inputDisplay = this.state.inputValue;
+      var isDropdownExpanded = this.state.isDropdownOpen;
+
+      var input = React.createElement(
+        'li',
+        {
+          'key': 'TEXT_COLOR_CTRL_INPUT_WRAPPER',
+          'className': 'Draftail--text-color-input-wrapper',
+          'data-draftail-balloon': 'down',
+          'aria-label': 'Select custom color',
+        },
+        React.createElement('color-input', {
+          key: 'TEXT_COLOR_CTRL_INPUT',
+          id: 'Draftail--text-color-input',
+          className: 'Draftail--text-color-input',
+          defaultValue: activeColor || '',
+          value: inputDisplay,
+          onKeyDown: this.handleInputKeyDown,
+        }),
+      );
+
+      var hr = React.createElement('hr', {
+        key: 'TEXT_COLOR_CTRL_HR',
+        className: 'Draftail--text-color-hr',
+      });
+
+      var dropdown = React.createElement(
+        'ul',
+        {
+          'id': 'Draftail--text-color-dropdown',
+          'className': 'Draftail--text-color-dropdown',
+          'aria-expanded': isDropdownExpanded,
+        },
+        options.map(this.createOptElement),
+        hr,
+        input,
+      );
+
+      // ── Toolbar button ──
+      var button = React.createElement(ToolbarButton, {
+        name: control.type.toUpperCase(),
+        active: !!activeColor,
+        title: control.label,
+        icon: icon,
+        tooltipDirection: 'up',
+        onClick: () => this.toggleDropdown(),
+      });
+
+      return React.createElement(
+        'div',
+        {
+          key: 'TEXT_COLOR_CTRL',
+          className: 'Draftail--text-color-control',
+          ref: this.controlRef,
+        },
+        dropdown,
+        button,
+      );
+    }
+  };
+  window.draftail.registerPlugin(
+    {
+      type: control.type,
+      inline: TextColorControl,
+    },
+    'controls',
+  );
+})();

draftail_text_utils/static/draftail_text_utils/js/text_color_entity.js

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

draftail_text_utils/templates/draftail_text_utils/icons/align-center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" id="icon-align-center"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M352 64c0-17.7-14.3-32-32-32L128 32c-17.7 0-32 14.3-32 32s14.3 32 32 32l192 0c17.7 0 32-14.3 32-32zm96 128c0-17.7-14.3-32-32-32L32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32zM0 448c0 17.7 14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 416c-17.7 0-32 14.3-32 32zM352 320c0-17.7-14.3-32-32-32l-192 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l192 0c17.7 0 32-14.3 32-32z"/></svg>

draftail_text_utils/templates/draftail_text_utils/icons/align-justify.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" id="icon-align-justify"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M448 64c0-17.7-14.3-32-32-32L32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32zm0 256c0-17.7-14.3-32-32-32L32 288c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32zM0 192c0 17.7 14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160c-17.7 0-32 14.3-32 32zM448 448c0-17.7-14.3-32-32-32L32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32z"/></svg>

draftail_text_utils/templates/draftail_text_utils/icons/align-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" id="icon-align-left"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M288 64c0 17.7-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l224 0c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32L32 352c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 224c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>

draftail_text_utils/templates/draftail_text_utils/icons/align-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" id="icon-align-right"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M448 64c0 17.7-14.3 32-32 32L192 96c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32l-224 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l224 0c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 224c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32L32 480c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>

draftail_text_utils/templates/draftail_text_utils/icons/font.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" id="icon-font"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M254 52.8C249.3 40.3 237.3 32 224 32s-25.3 8.3-30 20.8L57.8 416 32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-1.8 0 18-48 159.6 0 18 48-1.8 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-25.8 0L254 52.8zM279.8 304l-111.6 0L224 155.1 279.8 304z"/></svg>

draftail_text_utils/templates/draftail_text_utils/icons/highlighter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" id="icon-highlighter"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M315 315l158.4-215L444.1 70.6 229 229 315 315zm-187 5s0 0 0 0l0-71.7c0-15.3 7.2-29.6 19.5-38.6L420.6 8.4C428 2.9 437 0 446.2 0c11.4 0 22.4 4.5 30.5 12.6l54.8 54.8c8.1 8.1 12.6 19 12.6 30.5c0 9.2-2.9 18.2-8.4 25.6L334.4 396.5c-9 12.3-23.4 19.5-38.6 19.5L224 416l-25.4 25.4c-12.5 12.5-32.8 12.5-45.3 0l-50.7-50.7c-12.5-12.5-12.5-32.8 0-45.3L128 320zM7 466.3l63-63 70.6 70.6-31 31c-4.5 4.5-10.6 7-17 7L24 512c-13.3 0-24-10.7-24-24l0-4.7c0-6.4 2.5-12.5 7-17z"/></svg>

draftail_text_utils/templates/draftail_text_utils/icons/palette.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="icon-palette"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3L344 320c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>

draftail_text_utils/templates/draftail_text_utils/icons/text-height.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" id="icon-text-height"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M64 128l0-32 64 0 0 320-32 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-32 0 0-320 64 0 0 32c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48c0-26.5-21.5-48-48-48L160 32 48 32C21.5 32 0 53.5 0 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32zM502.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l32 0 0 192-32 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8l-32 0 0-192 32 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64z"/></svg>

draftail_text_utils/templatetags/draftail_text_utils_tags.py

@@ -0,0 +1,29 @@
+from urllib.parse import urljoin
+
+from django import template
+from django.utils.html import mark_safe
+
+from draftail_text_utils.conf import load_font_urls
+from draftail_text_utils.wagtail_hooks import _feature_static
+
+
+register = template.Library()
+
+
+@register.simple_tag
+def draftail_text_assets():
+    links = set()
+    preconnect_links = set()
+
+    # Load font stylesheets
+    for url in load_font_urls():
+        if url:
+            preconnect_links.add(f'<link rel="preconnect" href="{urljoin(url, "/")}">')
+            links.add(f'<link rel="stylesheet" href="{url}">')
+
+    # Load draftail stylesheets
+    links.add(
+        f'<link rel="stylesheet" href="{_feature_static("css/draftail_text_utils.css")}">'
+    )
+
+    return mark_safe("\n".join(links.union(preconnect_links)))  # noqa: S308