draftail-text-utils 3.0.2__tar.gz → 3.0.4__tar.gz

{draftail_text_utils-3.0.2 → draftail_text_utils-3.0.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: draftail-text-utils
-Version: 3.0.2
+Version: 3.0.4
 Summary: Extends Draftail's text customization
 Keywords: draftail,font family,font size,highlight,rich text,text alignment,text color,wagtail
 Author: baldwinboy

{draftail_text_utils-3.0.2 → draftail_text_utils-3.0.4}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "draftail-text-utils"
-version = "3.0.2"
+version = "3.0.4"
 description = "Extends Draftail's text customization"
 readme = "README.md"
 requires-python = ">=3.13"
@@ -50,7 +50,7 @@ Repository = "https://github.com/baldwinboy/draftail_text_utils"
 dev = [
     "dj-database-url==3.1.2",
     "pre-commit==4.7.0",
-    "prek==0.5.5",
+    "prek==0.5.6",
     "pytest==9.1.1",
     "pytest-cov==7.1.0",
     "pytest-django==4.14.0",

{draftail_text_utils-3.0.2 → draftail_text_utils-3.0.4}/pyproject.toml.orig

@@ -1,6 +1,6 @@
 [project]
 name = "draftail-text-utils"
-version = "3.0.2"
+version = "3.0.4"
 description = "Extends Draftail's text customization"
 readme = "README.md"
 requires-python = ">=3.13"
@@ -41,7 +41,7 @@ Repository = "https://github.com/baldwinboy/draftail_text_utils"
 dev = [
   "dj-database-url==3.1.2",
   "pre-commit==4.7.0",
-  "prek==0.5.5",
+  "prek==0.5.6",
   "pytest==9.1.1",
   "pytest-cov==7.1.0",
   "pytest-django==4.14.0",

draftail_text_utils-3.0.4/src/draftail_text_utils/__init__.py

@@ -0,0 +1 @@
+__version__ = "3.0.4"

draftail_text_utils-3.0.4/src/draftail_text_utils/rich_text/text_alignment.py

@@ -0,0 +1,197 @@
+"""
+Draftail rich-text feature: Text alignment.
+
+Registers:
+- Legacy ``BlockFeature``s for old, block-type-based alignment content.
+- A ``"text-alignment"`` ControlFeature for the toolbar button group.
+- Converter rules that store alignment in block data, so alignment can
+  coexist with heading, list, and other default block types.
+"""
+
+from django.utils.translation import gettext_lazy as _
+from draftjs_exporter.defaults import render_children
+from draftjs_exporter.dom import DOM
+from wagtail.admin.rich_text.converters.html_to_contentstate import (
+    BLOCK_KEY_NAME,
+    Block,
+    BlockElementHandler,
+)
+
+from draftail_text_utils.conf import feature_enabled
+
+from .base import (
+    control_json_script,
+    register_block_feature,
+    register_control_feature,
+)
+
+
+ALIGNMENTS = [
+    ("ALIGNMENT_LEFT", "left", "start", _("Left")),
+    ("ALIGNMENT_CENTER", "center", "center", _("Center")),
+    ("ALIGNMENT_RIGHT", "right", "end", _("Right")),
+    ("ALIGNMENT_JUSTIFY", "justify", "justify", _("Justify")),
+]
+
+ALIGNMENT_STYLES = {
+    value: style_value for _type, value, style_value, _label in ALIGNMENTS
+}
+STYLE_ALIGNMENTS = {
+    style_value: value for _type, value, style_value, _label in ALIGNMENTS
+}
+
+BLOCK_TAGS = [
+    ("unstyled", "p"),
+    ("header-one", "h1"),
+    ("header-two", "h2"),
+    ("header-three", "h3"),
+    ("header-four", "h4"),
+    ("header-five", "h5"),
+    ("header-six", "h6"),
+    ("blockquote", "blockquote"),
+    ("code-block", "pre"),
+]
+
+LIST_TAGS = [
+    ("ordered-list-item", "ol"),
+    ("unordered-list-item", "ul"),
+]
+
+
+class AlignmentBlock(Block):
+    """A block that persists alignment in its Draft.js ``data`` field."""
+
+    def __init__(self, typ, depth=0, key=None, alignment=None):
+        super().__init__(typ, depth, key)
+        self.data = {"alignment": alignment or "left"}
+
+    def as_dict(self):
+        return super().as_dict() | {"data": self.data}
+
+
+class AlignmentHandler(BlockElementHandler):
+    """Database HTML to ContentState, preserving the original block type."""
+
+    def __init__(self, block_type=None):
+        self.block_type = block_type
+
+    def create_block(self, name, attrs, state, contentstate):
+        block_type = self.block_type or state.list_item_type or "unstyled"
+        style_value = attrs.get("data-dtu-text-align", "start")
+        alignment = STYLE_ALIGNMENTS.get(style_value, "left")
+
+        return AlignmentBlock(
+            block_type,
+            depth=state.list_depth,
+            key=attrs.get(BLOCK_KEY_NAME),
+            alignment=alignment,
+        )
+
+
+def _alignment_element(tag_name):
+    """
+    Build a Draft.js exporter element function for ``tag_name``.
+
+    Alignment is read from block data and only added to the output when
+    present, so unaligned blocks keep their normal database representation.
+    """
+
+    def element(props):
+        block = props.get("block") or {}
+        data = block.get("data") or {}
+        alignment = data.get("alignment")
+
+        attrs = {}
+        if alignment:
+            style_value = ALIGNMENT_STYLES.get(alignment)
+            if style_value:
+                attrs["class"] = "dtu-block_text-align"
+                attrs["data-dtu-text-align"] = style_value
+
+        return DOM.create_element(tag_name, attrs, render_children(props))
+
+    element.__name__ = f"text_alignment_{tag_name}"
+    element.__repr__ = lambda _self: f"text_alignment_{tag_name}"
+    return element
+
+
+def _alignment_converter_rule():
+    block_map = {}
+    from_database_format = {}
+
+    for block_type, tag_name in BLOCK_TAGS:
+        block_map[block_type] = {"element": _alignment_element(tag_name)}
+        for _type, _value, style_value, _label in ALIGNMENTS:
+            from_database_format[f"{tag_name}[data-dtu-text-align='{style_value}']"] = (
+                AlignmentHandler(block_type)
+            )
+
+    for block_type, wrapper in LIST_TAGS:
+        block_map[block_type] = {
+            "element": _alignment_element("li"),
+            "wrapper": wrapper,
+        }
+        for _type, _value, style_value, _label in ALIGNMENTS:
+            from_database_format[f"li[data-dtu-text-align='{style_value}']"] = (
+                AlignmentHandler()
+            )
+
+    return {
+        "from_database_format": from_database_format,
+        "to_database_format": {"block_map": block_map},
+    }
+
+
+def register(features):
+    if not feature_enabled("TEXT_ALIGNMENT"):
+        return
+
+    # Keep parsing and re-saving old alignment content, which used block types
+    # and a div wrapper. Scope the selectors to ``div`` so they cannot match
+    # the new, alignment-preserving heading/list elements.
+    for type_, _value, style_value, _label in ALIGNMENTS:
+        register_block_feature(
+            features,
+            type_,
+            {},
+            css_selector=f"div.dtu-block_text-align[data-dtu-text-align='{style_value}']",
+            props={
+                "class": "dtu-block_text-align",
+                "data-dtu-text-align": style_value,
+            },
+        )
+
+    register_control_feature(
+        features,
+        "text-alignment",
+        js=["draftail_text_utils/js/text_alignment.js"],
+        css={"all": ("draftail_text_utils/css/text_alignment.css",)},
+    )
+
+    features.register_converter_rule(
+        "contentstate",
+        "text-alignment",
+        _alignment_converter_rule(),
+    )
+
+
+def control():
+    if not feature_enabled("TEXT_ALIGNMENT"):
+        return
+
+    return control_json_script(
+        type_="text-alignment",
+        label="Align Text",
+        description="Change text alignment",
+        icon="align-left",
+        data=[
+            {
+                "type": type_,
+                "value": value,
+                "label": label,
+                "style": {"textAlign": style_value},
+                "icon": f"align-{value}",
+            }
+            for type_, value, style_value, label in ALIGNMENTS
+        ],
+    )

{draftail_text_utils-3.0.2 → draftail_text_utils-3.0.4}/src/draftail_text_utils/static/draftail_text_utils/css/common.css

@@ -23,6 +23,7 @@
   margin: 0;
   z-index: 100;
   background: var(--w-color-surface-page, #fff);
+  color: var(--w-color-text-context, #1a1a1a);
   border: 1px solid var(--w-color-border-furniture, #ddd);
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

{draftail_text_utils-3.0.2 → draftail_text_utils-3.0.4}/src/draftail_text_utils/static/draftail_text_utils/js/font_size.js

@@ -38,6 +38,12 @@
   const entityType = 'TEXT_STYLE';
   const control = dt.parseControl('font-size');
 
+  function normaliseSize(value) {
+    if (value === null || value === undefined || value === '') return '';
+    var parsed = parseInt(value, 10);
+    return isNaN(parsed) ? String(value) : String(parsed);
+  }
+
   // The control component
   var FontSizeControl = class FontSizeControl extends React.Component {
     constructor(props) {
@@ -48,16 +54,19 @@
         isInputFocused: false,
       };
       this.controlRef = React.createRef();
+      this.replaceOnNextDigit = false;
     }
 
     // lifecycle
     componentDidMount() {
       this.syncInputValue();
       document.addEventListener('mousedown', this.handleClickOutside);
+      document.addEventListener('keydown', this.handleDocumentKeyDown, true);
     }
 
     componentWillUnmount() {
       document.removeEventListener('mousedown', this.handleClickOutside);
+      document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
     }
 
     componentDidUpdate() {
@@ -65,9 +74,9 @@
     }
 
     // helpers
-    getActiveSize() {
+    getActiveSize(editorState) {
       return dt.getActiveEntityData(
-        this.props.getEditorState(),
+        editorState || this.props.getEditorState(),
         entityType,
         'size',
       );
@@ -79,31 +88,33 @@
         return;
       }
 
-      var activeSize = this.getActiveSize();
-      var newValue = activeSize || '';
+      var newValue = normaliseSize(this.getActiveSize());
 
       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) {
-        dt.saveSelection(this.props.getEditorState);
-      }
-      this.setState({ isDropdownOpen: willBeOpen });
+    stopEditing() {
+      this.replaceOnNextDigit = false;
+      this.setState({ isDropdownOpen: false, isInputFocused: false }, () => {
+        this.syncInputValue();
+      });
     }
 
     applyFontSize(size) {
       var editorState = dt.restoreSelection(this.props.getEditorState());
-      var currentSize = this.getActiveSize(editorState);
+      var currentSize = normaliseSize(this.getActiveSize(editorState));
 
-      if (size === currentSize) {
+      if (String(size) === currentSize) {
         editorState = dt.removeStyleProperty(editorState, entityType, 'size');
         this.props.onChange(editorState);
-        this.setState({ isDropdownOpen: false, inputValue: '' });
+        this.replaceOnNextDigit = false;
+        this.setState({
+          isDropdownOpen: false,
+          isInputFocused: false,
+          inputValue: '',
+        });
         this.syncInputValue();
         return;
       }
@@ -112,82 +123,132 @@
       this.props.onChange(newContent);
 
       // Re-sync the input value
-      this.setState({ isDropdownOpen: false, inputValue: String(size) });
+      this.replaceOnNextDigit = false;
+      this.setState({
+        isDropdownOpen: false,
+        isInputFocused: false,
+        inputValue: String(size),
+      });
       this.syncInputValue();
     }
 
     increment() {
-      var activeSize = this.getActiveSize();
-      var currentSize = isNaN(activeSize || this.state.inputValue || 'NaN')
-        ? 16
-        : parseInt(activeSize || this.state.inputValue);
+      var value =
+        this.state.isInputFocused && this.state.inputValue
+          ? this.state.inputValue
+          : this.getActiveSize();
+      var currentSize = isNaN(value || 'NaN') ? 16 : parseInt(value);
       this.applyFontSize(Math.min(MAX_FONT_SIZE, currentSize + FONT_SIZE_STEP));
     }
 
     decrement() {
-      var activeSize = this.getActiveSize();
-      var currentSize = isNaN(activeSize || this.state.inputValue || 'NaN')
-        ? 16
-        : parseInt(activeSize || this.state.inputValue);
+      var value =
+        this.state.isInputFocused && this.state.inputValue
+          ? this.state.inputValue
+          : this.getActiveSize();
+      var currentSize = isNaN(value || 'NaN') ? 16 : parseInt(value);
       this.applyFontSize(Math.max(MIN_FONT_SIZE, currentSize - FONT_SIZE_STEP));
     }
 
     // event handlers
     handleInputMouseDown = (e) => {
-      this.toggleDropdown();
+      // Do not focus the input: that would blur the editor, clear Draftail's
+      // selection focus, and unmount the floating toolbar. Keep the editor
+      // focused and route keyboard input to the control instead.
+      e.preventDefault();
+      dt.saveSelection(this.props.getEditorState);
+      this.replaceOnNextDigit = true;
+      this.setState({ isDropdownOpen: true, isInputFocused: true });
     };
 
-    handleInputFocus = () => {
-      dt.saveSelection(this.props.getEditorState);
-      this.setState({ isInputFocused: true });
-      if (!this.state.isDropdownOpen) {
-        this.setState({ isDropdownOpen: true });
+    handleDocumentKeyDown = (e) => {
+      if (!this.state.isInputFocused) return;
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+
+      if (/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        var nextValue = this.replaceOnNextDigit
+          ? e.key
+          : (this.state.inputValue || '') + e.key;
+        this.replaceOnNextDigit = false;
+        this.setState({ inputValue: nextValue });
+        return;
       }
-    };
 
-    handleInputBlur = () => {
-      // When leaving the field, clear the focus flag and re‑sync (will clear if no style)
-      this.setState({ isInputFocused: false }, () => {
-        this.syncInputValue();
-      });
-    };
+      if (e.key === 'Backspace') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.replaceOnNextDigit = false;
+        this.setState({
+          inputValue: (this.state.inputValue || '').slice(0, -1),
+        });
+        return;
+      }
 
-    handleInputChange = (e) => {
-      this.setState({ inputValue: e.target.value.replace(/[^0-9]/g, '') });
-    };
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.increment();
+        return;
+      }
 
-    handleInputKeyDown = (e) => {
-      if (e.key === 'Escape') {
-        this.toggleDropdown(false);
-        this.syncInputValue();
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.decrement();
         return;
       }
 
-      if (['ArrowUp', 'ArrowDown', 'Enter'].includes(e.key)) {
+      if (e.key === 'Enter') {
         e.preventDefault();
-        if (e.key === 'Enter') {
-          var size = parseInt(this.state.inputValue, 10);
-          if (size >= MIN_FONT_SIZE && size <= MAX_FONT_SIZE) {
-            this.applyFontSize(size);
-          } else {
-            this.syncInputValue();
-          }
-          return;
+        e.stopPropagation();
+        var size = parseInt(this.state.inputValue, 10);
+        if (size >= MIN_FONT_SIZE && size <= MAX_FONT_SIZE) {
+          this.applyFontSize(size);
+        } else {
+          this.stopEditing();
         }
+        return;
+      }
 
-        if (e.key === 'ArrowUp') {
-          this.increment();
-          return;
-        }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.stopEditing();
+        return;
+      }
 
-        this.decrement();
+      if (e.key === 'Tab') {
+        this.stopEditing();
         return;
       }
+
+      // Keep all other typing/navigation out of the editor while the control
+      // is capturing input.
+      if (
+        e.key.length === 1 ||
+        [
+          'Delete',
+          'Home',
+          'End',
+          'PageUp',
+          'PageDown',
+          'ArrowLeft',
+          'ArrowRight',
+        ].includes(e.key)
+      ) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
     };
 
     handleClickOutside = (event) => {
       if (dt.clickOutsideGuard(this.controlRef, event)) {
-        this.setState({ isDropdownOpen: false });
+        this.replaceOnNextDigit = false;
+        this.setState({ isDropdownOpen: false, isInputFocused: false }, () => {
+          this.syncInputValue();
+        });
       }
     };
 
@@ -201,7 +262,8 @@
             this.applyFontSize(opt.size);
           },
           'className': 'Draftail--dtu-option Draftail--font-size-option',
-          'aria-selected': this.state.inputValue === opt.size,
+          'aria-selected':
+            normaliseSize(this.state.inputValue) === String(opt.size),
         },
         opt.label,
       );
@@ -209,7 +271,6 @@
 
     // render
     render() {
-      var activeSize = this.getActiveSize();
       var inputDisplay = this.state.inputValue;
       var isDropdownExpanded = this.state.isDropdownOpen;
       var dropdown = React.createElement(
@@ -256,14 +317,10 @@
           id: 'Draftail--font-size-input',
           className: 'Draftail--font-size-input',
           type: 'text',
-          defaultValue: activeSize || '',
           value: inputDisplay,
           placeholder: 'Font Size',
+          tabIndex: -1,
           onMouseDown: this.handleInputMouseDown,
-          onFocus: this.handleInputFocus,
-          onBlur: this.handleInputBlur,
-          onChange: this.handleInputChange,
-          onKeyDown: this.handleInputKeyDown,
         }),
       );
 

{draftail_text_utils-3.0.2 → draftail_text_utils-3.0.4}/src/draftail_text_utils/static/draftail_text_utils/js/text_alignment.js

@@ -12,13 +12,21 @@
 
 (function () {
   var React = window.React;
-  var RichUtils = window.DraftJS.RichUtils;
+  var DraftJS = window.DraftJS;
   var ToolbarButton = window.Draftail.ToolbarButton;
   var dt = window.DraftailTextUtils;
   var data = window.draftailTextUtils || {};
   const control = dt.parseControl('text-alignment');
   const options = control.data || [];
 
+  // Legacy alignment was stored as a block type instead of block data.
+  const LEGACY_ALIGNMENTS = {
+    ALIGNMENT_LEFT: 'left',
+    ALIGNMENT_CENTER: 'center',
+    ALIGNMENT_RIGHT: 'right',
+    ALIGNMENT_JUSTIFY: 'justify',
+  };
+
   // ── Helper to find active text alignment ──
   function getActiveOption(editorState) {
     const selection = editorState.getSelection();
@@ -26,8 +34,60 @@
       .getCurrentContent()
       .getBlockForKey(selection.getStartKey());
     if (!block) return null;
-    const blockType = block.getType();
-    return options.find((opt) => opt.type === blockType) || null;
+    const alignment =
+      block.getData().get('alignment') || LEGACY_ALIGNMENTS[block.getType()];
+    return options.find((opt) => opt.value === alignment) || null;
+  }
+
+  function setAlignment(editorState, alignment) {
+    const selection = editorState.getSelection();
+    const startKey = selection.getStartKey();
+    const endKey = selection.getEndKey();
+    let content = editorState.getCurrentContent();
+    let blockKey = startKey;
+
+    while (blockKey) {
+      let block = content.getBlockForKey(blockKey);
+      const blockSelection = selection.merge({
+        anchorKey: blockKey,
+        anchorOffset: 0,
+        focusKey: blockKey,
+        focusOffset: block.getLength(),
+        isBackward: false,
+      });
+
+      // Migrate legacy ALIGNMENT_* blocks to a regular paragraph plus block
+      // data, so the new control can update them.
+      if (LEGACY_ALIGNMENTS[block.getType()]) {
+        content = DraftJS.Modifier.setBlockType(
+          content,
+          blockSelection,
+          'unstyled',
+        );
+        block = content.getBlockForKey(blockKey);
+      }
+
+      let blockData = block.getData();
+      if (alignment) {
+        blockData = blockData.set('alignment', alignment);
+      } else {
+        blockData = blockData.delete('alignment');
+      }
+
+      content = DraftJS.Modifier.setBlockData(
+        content,
+        blockSelection,
+        blockData,
+      );
+
+      if (blockKey === endKey) break;
+      blockKey = content.getKeyAfter(blockKey);
+    }
+
+    return DraftJS.EditorState.forceSelection(
+      DraftJS.EditorState.push(editorState, content, 'change-block-data'),
+      selection,
+    );
   }
 
   class TextAlignmentControl extends React.Component {
@@ -65,8 +125,10 @@
     handleOptionClick = (opt) => {
       const { getEditorState, onChange } = this.props;
       const editorState = getEditorState();
-      const newState = RichUtils.toggleBlockType(editorState, opt.type);
-      onChange(newState);
+      const activeOption = getActiveOption(editorState);
+      const removing = activeOption && activeOption.type === opt.type;
+
+      onChange(setAlignment(editorState, removing ? null : opt.value));
       this.setState({ isOpen: false });
     };
 
@@ -127,6 +189,35 @@
     }
   }
 
+  function blockStyleFn(block) {
+    const alignment = block.getData().get('alignment');
+    if (!alignment) return null;
+    return `Draftail-block--ALIGNMENT_${alignment.toUpperCase()}`;
+  }
+
+  // Add alignment classes to the editor blocks without changing their type.
+  if (window.draftail && window.draftail.initEditor) {
+    var originalInitEditor = window.draftail.initEditor;
+    if (!originalInitEditor.__dtuTextAlignment) {
+      var patchedInitEditor = function (selector, options, script) {
+        options = options || {};
+        options.plugins = (options.plugins || []).concat([
+          {
+            type: 'dtu-text-alignment',
+            blockStyleFn: blockStyleFn,
+          },
+        ]);
+        return Reflect.apply(originalInitEditor, window.draftail, [
+          selector,
+          options,
+          script,
+        ]);
+      };
+      patchedInitEditor.__dtuTextAlignment = true;
+      window.draftail.initEditor = patchedInitEditor;
+    }
+  }
+
   window.draftail.registerPlugin(
     {
       type: control.type,

{draftail_text_utils-3.0.2 → draftail_text_utils-3.0.4}/src/draftail_text_utils/wagtail_hooks.py

@@ -58,8 +58,10 @@ def register_text_style_feature(features):
     text_style.register(features)
 
 
-@hooks.register("register_rich_text_features")
+@hooks.register("register_rich_text_features", order=100)
 def register_text_alignment_feature(features):
+    # Run after Wagtail's built-in block features so the alignment converter
+    # rule is applied after (and can therefore override) their block maps.
     text_alignment.register(features)
 
 

draftail_text_utils-3.0.2/src/draftail_text_utils/__init__.py

@@ -1 +0,0 @@
-__version__ = "3.0.2"

draftail_text_utils-3.0.2/src/draftail_text_utils/rich_text/text_alignment.py

@@ -1,70 +0,0 @@
-"""
-Draftail rich-text feature: Text alignment.
-
-Registers:
-- Four ``BlockFeature``s per alignment value.
-- A ``"text-alignment"`` ControlFeature for the toolbar button group.
-"""
-
-from django.utils.translation import gettext_lazy as _
-
-from draftail_text_utils.conf import feature_enabled
-
-from .base import (
-    control_json_script,
-    register_block_feature,
-    register_control_feature,
-)
-
-
-ALIGNMENTS = [
-    ("ALIGNMENT_LEFT", "left", "start", _("Left")),
-    ("ALIGNMENT_CENTER", "center", "center", _("Center")),
-    ("ALIGNMENT_RIGHT", "right", "end", _("Right")),
-    ("ALIGNMENT_JUSTIFY", "justify", "justify", _("Justify")),
-]
-
-
-def register(features):
-    if not feature_enabled("TEXT_ALIGNMENT"):
-        return
-
-    for type_, _value, styleValue, _label in ALIGNMENTS:
-        register_block_feature(
-            features,
-            type_,
-            {},
-            css_selector=f".dtu-block_text-align[data-dtu-text-align='{styleValue}']",
-            props={
-                "class": "dtu-block_text-align",
-                "data-dtu-text-align": styleValue,
-            },
-        )
-
-    register_control_feature(
-        features,
-        "text-alignment",
-        js=["draftail_text_utils/js/text_alignment.js"],
-        css={"all": ("draftail_text_utils/css/text_alignment.css",)},
-    )
-
-
-def control():
-    if not feature_enabled("TEXT_ALIGNMENT"):
-        return
-
-    return control_json_script(
-        type_="text-alignment",
-        label="Align Text",
-        description="Change text alignment",
-        icon="align-left",
-        data=[
-            {
-                "type": type_,
-                "label": label,
-                "style": {"textAlign": styleValue},
-                "icon": f"align-{value}",
-            }
-            for type_, value, styleValue, label in ALIGNMENTS
-        ],
-    )