draftail-text-utils 0.1.7__tar.gz → 0.3.0__tar.gz

{draftail_text_utils-0.1.7 → draftail_text_utils-0.3.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: draftail-text-utils
-Version: 0.1.7
+Version: 0.3.0
 Summary: Extends Draftail's text customization
 Keywords: wagtail,draftail,rich text,text color,highlight,font size,font family,text alignment
 Author: baldwinboy
@@ -21,7 +21,7 @@ Classifier: Framework :: Wagtail :: 6
 Classifier: Framework :: Wagtail :: 7
 Requires-Dist: cssutils>=2.15.0
 Requires-Dist: django>=5.0
-Requires-Dist: wagtail>=6.0
+Requires-Dist: wagtail>=7.3.2
 Requires-Dist: wagtail-traverse>=1.0.1
 Requires-Python: >=3.13
 Project-URL: Homepage, https://github.com/baldwinboy/draftail-text-utils
@@ -34,6 +34,7 @@ Description-Content-Type: text/markdown
 # Draftail Text Utils
 
 Extends Draftail's text customization. Includes:
+- Styled Links (preserve colour, highlight, and size in links, with tooltip Edit/Remove)
 - Text Color (with optional palettes)
 - Highlight Color
 - Font Family

{draftail_text_utils-0.1.7 → draftail_text_utils-0.3.0}/README.md

@@ -1,6 +1,7 @@
 # Draftail Text Utils
 
 Extends Draftail's text customization. Includes:
+- Styled Links (preserve colour, highlight, and size in links, with tooltip Edit/Remove)
 - Text Color (with optional palettes)
 - Highlight Color
 - Font Family

{draftail_text_utils-0.1.7 → draftail_text_utils-0.3.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "draftail-text-utils"
-version = "0.1.7"
+version = "0.3.0"
 description = "Extends Draftail's text customization"
 readme = "README.md"
 license = "BSD-3-Clause"
@@ -28,7 +28,7 @@ classifiers = [
 dependencies = [
     "cssutils>=2.15.0",
     "Django>=5.0",
-    "Wagtail>=6.0",
+    "Wagtail>=7.3.2",
     "wagtail-traverse>=1.0.1",
 ]
 

{draftail_text_utils-0.1.7 → draftail_text_utils-0.3.0}/src/draftail_text_utils/conf.py

@@ -15,8 +15,9 @@ Usage in your Django settings:
         # Option A: point to an existing module with a DRAFTAIL_COLORS list
         "COLORS": {
             "MODULE": None,  # e.g. "apps.core.models"
+            "CALLABLE": None,  # e.g. "myapp.utils.get_colors"
         },
-        # Option B: provide an explicit palette (ignored if MODULE is set)
+        # Option B: provide an explicit palette (ignored if MODULE/CALLABLE is set)
         "COLOR_PALETTE": None,  # falls back to built-in defaults
         # ---- Font families ----
         # Option A: point to an existing module with a DRAFTAIL_FONT_FAMILIES list
@@ -208,6 +209,24 @@ def _normalise_font_urls(font_urls):
 
 def load_color_palette():
     colors_config = get_setting("COLORS", {})
+
+    callable_path = colors_config.get("CALLABLE")
+    if callable_path:
+        try:
+            module_path, func_name = callable_path.rsplit(".", 1)
+            module = importlib.import_module(module_path)
+            func = getattr(module, func_name)
+            if callable(func):
+                result = func()
+                if result is not None:
+                    return result
+        except (ImportError, ValueError, AttributeError) as e:
+            logger.warning(
+                "Failed to load colours from callable %s: %s",
+                callable_path,
+                e,
+            )
+
     module_path = colors_config.get("MODULE")
 
     if module_path:

draftail_text_utils-0.3.0/src/draftail_text_utils/rich_text/font_size.py

@@ -0,0 +1,40 @@
+"""
+Draftail rich-text feature: Font size toolbar control.
+
+Registers a ``"font-size"`` ControlFeature that applies/removes the
+``size`` property on the unified ``TEXT_STYLE`` entity.
+"""
+
+from draftail_text_utils.conf import feature_enabled
+
+from .base import (
+    control_json_script,
+    register_control_feature,
+)
+
+
+def register(features):
+    if not feature_enabled("FONT_SIZE"):
+        return
+
+    register_control_feature(
+        features,
+        feature_name="font-size",
+        icon="text-height",
+        label="Font Size",
+        description="Change font size",
+        js=["draftail_text_utils/js/font_size.js"],
+        css={"all": ("draftail_text_utils/css/font_size.css",)},
+    )
+
+
+def control():
+    if not feature_enabled("FONT_SIZE"):
+        return
+
+    return control_json_script(
+        type_="font-size",
+        icon="text-height",
+        label="Font Size",
+        description="Change font size",
+    )

draftail_text_utils-0.3.0/src/draftail_text_utils/rich_text/highlight_color.py

@@ -0,0 +1,37 @@
+"""
+Draftail rich-text feature: Highlight color toolbar control.
+
+Registers a ``"highlight-color"`` ControlFeature that applies/removes the
+``backgroundColor`` property on the unified ``TEXT_STYLE`` entity.
+"""
+
+from draftail_text_utils.conf import feature_enabled
+
+from .base import (
+    control_json_script,
+    register_control_feature,
+)
+
+
+def register(features):
+    if not feature_enabled("HIGHLIGHT_COLOR"):
+        return
+
+    register_control_feature(
+        features,
+        feature_name="highlight-color",
+        js=["draftail_text_utils/js/highlight_color.js"],
+        css={"all": ("draftail_text_utils/css/highlight_color.css",)},
+    )
+
+
+def control():
+    if not feature_enabled("HIGHLIGHT_COLOR"):
+        return
+
+    return control_json_script(
+        type_="highlight-color",
+        icon="highlighter",
+        label="Highlight Color",
+        description="Change highlight color",
+    )

draftail_text_utils-0.3.0/src/draftail_text_utils/rich_text/text_color.py

@@ -0,0 +1,37 @@
+"""
+Draftail rich-text feature: Text color toolbar control.
+
+Registers a ``"text-color"`` ControlFeature that applies/removes the
+``color`` property on the unified ``TEXT_STYLE`` entity.
+"""
+
+from draftail_text_utils.conf import feature_enabled
+
+from .base import (
+    control_json_script,
+    register_control_feature,
+)
+
+
+def register(features):
+    if not feature_enabled("TEXT_COLOR"):
+        return
+
+    register_control_feature(
+        features,
+        feature_name="text-color",
+        js=["draftail_text_utils/js/text_color.js"],
+        css={"all": ("draftail_text_utils/css/text_color.css",)},
+    )
+
+
+def control():
+    if not feature_enabled("TEXT_COLOR"):
+        return
+
+    return control_json_script(
+        type_="text-color",
+        icon="palette",
+        label="Text Color",
+        description="Change text color",
+    )

draftail_text_utils-0.3.0/src/draftail_text_utils/rich_text/text_style.py

@@ -0,0 +1,294 @@
+import cssutils
+
+from django.urls import reverse_lazy
+from django.utils.html import escape
+from draftjs_exporter.dom import DOM
+from wagtail.admin.rich_text.converters.contentstate_models import (
+    Entity,
+    EntityRange,
+)
+from wagtail.admin.rich_text.converters.html_to_contentstate import (
+    FORCE_WHITESPACE,
+    STRIP_WHITESPACE,
+    InlineEntityElementHandler,
+)
+from wagtail.admin.rich_text.editors.draftail.features import EntityFeature
+from wagtail.models import Page
+from wagtail.rich_text import LinkHandler
+from wagtail.whitelist import check_url
+
+
+STYLE_KEYS = {"color", "backgroundColor", "size"}
+LINK_KEYS = {"url", "id", "parentId"}
+
+
+class TextStyleEntityHandler(InlineEntityElementHandler):
+    """
+    Database HTML to Draft.js ContentState.
+    Converts span elements with ``data-entity-type="TEXT_STYLE"``
+    and a ``style`` attribute into a single ``TEXT_STYLE`` entity
+    with ``color``, ``backgroundColor``, and ``size`` data.
+    """
+
+    mutability = "MUTABLE"
+
+    def get_attribute_data(self, attrs):
+        try:
+            style = cssutils.parseStyle(attrs["style"])
+            data = {"url": ""}
+            color = style.getPropertyValue("color")
+            if color:
+                data["color"] = color
+            bg = style.getPropertyValue("background-color")
+            if bg:
+                data["backgroundColor"] = bg
+            size = style.getPropertyValue("font-size")
+            if size:
+                data["size"] = size
+
+            return data
+        except Exception:
+            return {}
+
+
+class StyledLinkElementHandler(InlineEntityElementHandler):
+    """
+    Database HTML to Draft.js ContentState for ``<a>`` tags.
+
+    Produces a ``LINK`` entity for unstyled links (no
+    ``data-entity-type="TEXT_STYLE"``), and a ``TEXT_STYLE`` entity
+    for styled links (with ``data-entity-type="TEXT_STYLE"``).
+
+    The entity data carries both link fields (``id``, ``url``,
+    ``parentId``) and style fields (``color``, ``backgroundColor``,
+    ``size``) when applicable.
+    """
+
+    mutability = "MUTABLE"
+
+    def handle_starttag(self, name, attrs, state, contentstate):
+        if state.current_block is None:
+            from wagtail.admin.rich_text.converters.html_to_contentstate import (
+                add_paragraph_block,
+            )
+
+            add_paragraph_block(state, contentstate)
+
+        if state.leading_whitespace == FORCE_WHITESPACE:
+            state.current_block.text += " "
+            state.leading_whitespace = STRIP_WHITESPACE
+
+        attrs = dict(attrs)
+        is_styled = attrs.get("data-entity-type") == "TEXT_STYLE"
+        entity_type = "TEXT_STYLE" if is_styled else self.entity_type
+
+        entity = Entity(
+            entity_type,
+            self.mutability,
+            self.get_attribute_data(attrs),
+        )
+        key = contentstate.add_entity(entity)
+
+        entity_range = EntityRange(key)
+        entity_range.offset = len(state.current_block.text)
+        state.current_block.entity_ranges.append(entity_range)
+        state.current_entity_ranges.append(entity_range)
+
+    def get_attribute_data(self, attrs):
+        data = {}
+
+        try:
+            style = cssutils.parseStyle(attrs.get("style", ""))
+            color = style.getPropertyValue("color")
+            if color:
+                data["color"] = color
+            bg = style.getPropertyValue("background-color")
+            if bg:
+                data["backgroundColor"] = bg
+            size = style.getPropertyValue("font-size")
+            if size:
+                data["size"] = size
+        except Exception:  # noqa: S110
+            # Style parsing is best-effort; entity data
+            # may have just link fields and no style attrs.
+            pass
+
+        linktype = attrs.get("linktype")
+        href = attrs.get("href")
+
+        if linktype == "page":
+            from wagtail.models import Page
+
+            page_id = attrs.get("id")
+            try:
+                page = Page.objects.get(id=page_id).specific
+                data["id"] = page.id
+                data["url"] = page.url
+                parent = page.get_parent()
+                data["parentId"] = parent.id if parent else None
+            except Page.DoesNotExist:
+                data["id"] = int(page_id)
+                data["url"] = None
+                data["parentId"] = None
+        elif href:
+            data["url"] = href
+
+        return data
+
+
+def _has_styles(props):
+    return any(props.get(k) for k in STYLE_KEYS)
+
+
+def text_style_entity_decorator(props):
+    """
+    Draft.js ContentState to database HTML.
+
+    Converts entities to the corresponding database HTML:
+    - ``LINK`` entity without style data → ``<a>`` (plain link, backward
+      compatible with Wagtail core format, no ``data-entity-type``).
+    - ``TEXT_STYLE`` entity with link data and style data → ``<a>``
+      with ``data-entity-type="TEXT_STYLE"`` (styled link).
+    - ``TEXT_STYLE`` entity without link data → ``<span>`` with
+      ``data-entity-type="TEXT_STYLE"`` (plain styled text).
+    """
+    color = props.get("color")
+    background_color = props.get("backgroundColor")
+    size = props.get("size")
+    link_id = props.get("id")
+    link_url = props.get("url")
+    children = props.get("children")
+
+    styles = []
+    if color:
+        styles.append(f"color: {color} !important")
+    if background_color:
+        styles.append(f"background-color: {background_color} !important")
+    if size:
+        if isinstance(size, (int, float)):
+            size = f"{size}px"
+        styles.append(f"font-size: {size} !important")
+
+    has_styles = bool(styles)
+
+    attrs = {}
+    if has_styles:
+        attrs["style"] = "; ".join(styles) + ";"
+
+    if link_id is not None:
+        attrs["linktype"] = "page"
+        attrs["id"] = link_id
+        if has_styles:
+            attrs["data-entity-type"] = "TEXT_STYLE"
+        return DOM.create_element("a", attrs, children)
+
+    if link_url:
+        attrs["href"] = check_url(link_url)
+        if has_styles:
+            attrs["data-entity-type"] = "TEXT_STYLE"
+        return DOM.create_element("a", attrs, children)
+
+    # span (no link) — always add data-entity-type for backward compatibility
+    attrs["data-entity-type"] = "TEXT_STYLE"
+    return DOM.create_element("span", attrs, children)
+
+
+class StyledPageLinkHandler(LinkHandler):
+    identifier = "page"
+
+    @classmethod
+    def get_model(cls):
+        return Page
+
+    @classmethod
+    def expand_db_attributes(cls, attrs):
+        style = attrs.get("style", "")
+        try:
+            page = cls.get_instance(attrs)
+            href = page.url
+            tag = f'<a href="{href}"'
+        except Page.DoesNotExist:
+            tag = "<a"
+        if style:
+            tag += f' style="{escape(style)}"'
+        return tag + ">"
+
+    @classmethod
+    def expand_db_attributes_many(cls, attrs_list):
+        instances = cls.get_many(attrs_list)
+        results = []
+        for attrs, page in zip(attrs_list, instances, strict=True):
+            style = attrs.get("style", "")
+            if page:
+                href = page.url
+                tag = f'<a href="{href}"'
+            else:
+                tag = "<a"
+            if style:
+                tag += f' style="{escape(style)}"'
+            tag += ">"
+            results.append(tag)
+        return results
+
+
+def register(features):
+    features.register_editor_plugin(
+        "draftail",
+        "text-style-entity",
+        EntityFeature(
+            {
+                "type": "TEXT_STYLE",
+                "attributes": [
+                    "color",
+                    "backgroundColor",
+                    "size",
+                    "url",
+                    "id",
+                    "parentId",
+                ],
+                "chooserUrls": {
+                    "pageChooser": reverse_lazy("wagtailadmin_choose_page"),
+                    "externalLinkChooser": reverse_lazy(
+                        "wagtailadmin_choose_page_external_link"
+                    ),
+                    "emailLinkChooser": reverse_lazy(
+                        "wagtailadmin_choose_page_email_link"
+                    ),
+                    "phoneLinkChooser": reverse_lazy(
+                        "wagtailadmin_choose_page_phone_link"
+                    ),
+                    "anchorLinkChooser": reverse_lazy(
+                        "wagtailadmin_choose_page_anchor_link"
+                    ),
+                },
+            },
+            js=[
+                "wagtailadmin/js/page-chooser-modal.js",
+                "draftail_text_utils/js/styled_link_source.js",
+                "draftail_text_utils/js/text_style_entity.js",
+            ],
+        ),
+    )
+
+    features.register_converter_rule(
+        "contentstate",
+        "text-style-entity",
+        {
+            "from_database_format": {
+                'span[data-entity-type="TEXT_STYLE"]': TextStyleEntityHandler(
+                    "TEXT_STYLE"
+                ),
+                'a[data-entity-type="TEXT_STYLE"]': StyledLinkElementHandler(
+                    "TEXT_STYLE"
+                ),
+            },
+            "to_database_format": {
+                "entity_decorators": {
+                    "TEXT_STYLE": text_style_entity_decorator,
+                }
+            },
+        },
+    )
+
+    features.register_link_type(StyledPageLinkHandler)
+    features.default_features.append("text-style-entity")

draftail_text_utils-0.3.0/src/draftail_text_utils/static/draftail_text_utils/css/color.css

@@ -0,0 +1,52 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-property-value-allowed-list */
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable scale-unlimited/declaration-strict-value */
+/* stylelint-disable property-disallowed-list */
+/* stylelint-disable color-named */
+.Draftail--dtu-color-input-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Draftail--dtu-color-input-wrapper input[type='color'] {
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  inline-size: 2rem;
+  block-size: 1.5rem;
+  background: none;
+}
+
+.Draftail--dtu-color-option-wrapper {
+  flex: 0 0 calc(25% - 12px);
+}
+
+.Draftail--dtu-color-option {
+  position: relative;
+  background: attr(name type(<color>), black) !important;
+  border: 0.3125rem solid var(--w-color-surface-menu-hover, #e8e8e8);
+}
+
+.Draftail--dtu-color-option:hover,
+.Draftail--dtu-color-option.Draftail-ToolbarButton--active {
+  border: 0.3125rem solid var(--w-color-text-button-outline-default, #007d7e) !important;
+}
+
+.Draftail--dtu-color-hr {
+  width: 100%;
+}
+
+.Draftail--dtu-color-option > .Draftail-ToolbarButton__label {
+  display: none;
+}
+
+.Draftail--dtu-color-option.Draftail-ToolbarButton--active
+  > .Draftail-ToolbarButton__label {
+  display: inline-block;
+  position: relative;
+  text-align: center;
+  top: -2px;
+  color: var(--w-color-text-button-outline-default, #007d7e);
+}

draftail_text_utils-0.1.7/src/draftail_text_utils/static/draftail_text_utils/css/font_family.css → draftail_text_utils-0.3.0/src/draftail_text_utils/static/draftail_text_utils/css/common.css

@@ -3,7 +3,7 @@
 /* stylelint-disable declaration-no-important */
 /* stylelint-disable scale-unlimited/declaration-strict-value */
 /* stylelint-disable property-disallowed-list */
-.Draftail--font-family-control {
+.Draftail--dtu-control {
   cursor: default !important;
   position: relative;
   display: inline-block;
@@ -13,44 +13,74 @@
   outline-width: 0 !important;
 }
 
-.Draftail--font-family-dropdown {
-  display: none;
+.Draftail--dtu-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: 100;
-  min-width: 180px;
+  display: none;
   max-height: 260px;
-  overflow-y: auto;
   margin: 0;
-  padding: 4px 0;
-  list-style: none;
+  z-index: 100;
   background: var(--w-color-surface-page, #fff);
   border: 1px solid var(--w-color-border-furniture, #ddd);
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  list-style: none;
 }
 
-.Draftail--font-family-dropdown[aria-expanded='true'] {
+.Draftail--dtu-dropdown[aria-expanded='false'] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.Draftail--dtu-dropdown[aria-expanded='true'] {
   display: block;
+  min-width: 180px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.Draftail--dtu-dropdown-row[aria-expanded='true'] {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  overflow: inherit;
+}
+
+.Draftail--dtu-dropdown-palette[aria-expanded='true'] {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  min-width: calc((1.875rem * 4) + 24px);
+  overflow: inherit;
+  padding: 0.5rem 4px;
 }
 
-.Draftail--font-family-option {
+.Draftail--dtu-option {
   padding: 6px 12px;
   cursor: pointer;
   font-size: 13px;
 }
 
-.Draftail--font-family-option:hover {
+.Draftail--dtu-option:hover {
   background: var(--w-color-surface-menu-hover, #f0f0f0);
 }
 
-.Draftail--font-family-option[aria-selected='true'] {
+.Draftail--dtu-option[aria-selected='true'] {
   background: var(--w-color-surface-menu-hover, #e8e8e8);
   font-weight: 600;
 }
 
-.Draftail--font-family-icon {
+.Draftail--dtu-icon {
   font-family: serif;
   font-size: 14px;
   font-weight: 700;

draftail_text_utils-0.3.0/src/draftail_text_utils/static/draftail_text_utils/css/font_family.css

@@ -0,0 +1 @@
+/* stylelint-disable no-empty-source */