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

draftail_text_utils/static/draftail_text_utils/css/font_family.css

@@ -0,0 +1,57 @@
+/* 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 */
+.Draftail--font-family-control {
+  cursor: default !important;
+  position: relative;
+  display: inline-block;
+  margin-inline-end: 0.625rem;
+  background: none !important;
+  border-width: 0 !important;
+  outline-width: 0 !important;
+}
+
+.Draftail--font-family-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  min-width: 180px;
+  max-height: 260px;
+  overflow-y: auto;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  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);
+}
+
+.Draftail--font-family-dropdown[aria-expanded='true'] {
+  display: block;
+}
+
+.Draftail--font-family-option {
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.Draftail--font-family-option:hover {
+  background: var(--w-color-surface-menu-hover, #f0f0f0);
+}
+
+.Draftail--font-family-option[aria-selected='true'] {
+  background: var(--w-color-surface-menu-hover, #e8e8e8);
+  font-weight: 600;
+}
+
+.Draftail--font-family-icon {
+  font-family: serif;
+  font-size: 14px;
+  font-weight: 700;
+}

draftail_text_utils/static/draftail_text_utils/css/font_size.css

@@ -0,0 +1,102 @@
+/* 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 */
+.Draftail--font-size-control {
+  cursor: default !important;
+  position: relative;
+  display: inline-block;
+  background: none !important;
+  border-width: 0 !important;
+  outline-width: 0 !important;
+}
+
+.Draftail--font-size-control-row > * {
+  flex: 0 1 min-content;
+  margin-inline-end: 0;
+}
+
+.Draftail--font-size-control-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  width: min-content;
+}
+
+.Draftail--font-size-decrement,
+.Draftail--font-size-increment {
+  min-width: min-content;
+  padding-inline: 0.25rem;
+}
+
+.Draftail--font-size-decrement > span,
+.Draftail--font-size-increment > span {
+  margin-top: -0.25rem;
+}
+
+.Draftail--font-size-input-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+input.Draftail--font-size-input {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  height: 1.875rem;
+  font-size: 1rem;
+  min-width: 5rem;
+  padding-inline: 0.25rem;
+}
+
+input.Draftail--font-size-input::placeholder {
+  font-size: 0.75rem;
+  text-align: center;
+  top: -0.09375rem;
+  position: relative;
+}
+
+.Draftail--font-size-dropdown {
+  position: absolute;
+  z-index: 100;
+  min-width: 180px;
+  max-height: 260px;
+  overflow: auto;
+  margin: 0;
+  padding: 4px 0;
+  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);
+}
+
+.Draftail--font-size-dropdown[aria-expanded='false'] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.Draftail--font-size-option {
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.Draftail--font-size-option:hover {
+  background: var(--w-color-surface-menu-hover, #f0f0f0);
+}
+
+.Draftail--font-size-option[aria-selected='true'] {
+  background: var(--w-color-surface-menu-hover, #e8e8e8);
+  font-weight: 600;
+}

draftail_text_utils/static/draftail_text_utils/css/highlight_color.css

@@ -0,0 +1,117 @@
+/* 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 */
+/* stylelint-disable selector-type-no-unknown */
+.Draftail--highlight-color-control {
+  cursor: default !important;
+  position: relative;
+  display: inline-block;
+  margin-inline-end: 0.625rem;
+  background: none !important;
+  border-width: 0 !important;
+  outline-width: 0 !important;
+}
+
+.Draftail--highlight-color-input-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+input.Draftail--highlight-color-input {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  height: 1.875rem;
+  font-size: 1rem;
+  padding-inline: 0.25rem;
+}
+
+input.Draftail--highlight-color-input::placeholder {
+  font-size: 0.75rem;
+  text-align: center;
+  top: -0.09375rem;
+  position: relative;
+}
+
+.Draftail--highlight-color-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+}
+
+.Draftail--highlight-color-dropdown[aria-expanded='false'] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.Draftail--highlight-color-dropdown[aria-expanded='true'] {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  min-width: calc((1.875rem * 4) + 24px);
+  max-height: 260px;
+  overflow: inherit;
+  margin: 0;
+  padding: 0.5rem 4px;
+  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);
+}
+
+.Draftail--highlight-color-option-wrapper {
+  flex: 1 0 calc(25% - 12px);
+}
+
+.Draftail--highlight-color-option {
+  position: relative;
+  background: attr(name type(<color>), black) !important;
+  border: 0.3125rem solid var(--w-color-surface-menu-hover, #e8e8e8);
+}
+
+.Draftail--highlight-color-option:hover,
+.Draftail--highlight-color-option.Draftail-ToolbarButton--active {
+  border: 0.3125rem solid var(--w-color-text-button-outline-default, #007d7e) !important;
+}
+
+.Draftail--highlight-color-hr {
+  width: 100%;
+}
+
+.Draftail--highlight-color-option > .Draftail-ToolbarButton__label {
+  display: none;
+}
+
+.Draftail--highlight-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);
+}
+
+color-input::part(gamut) {
+  display: none !important;
+}
+
+color-input::part(panel) {
+  max-inline-size: 15rem;
+}

draftail_text_utils/static/draftail_text_utils/css/text_alignment.css

@@ -0,0 +1,72 @@
+/* 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 */
+.Draftail--text-alignment-control {
+  cursor: default !important;
+  position: relative;
+  display: inline-block;
+  margin-inline-end: 0.625rem;
+  background: none !important;
+  border-width: 0 !important;
+  outline-width: 0 !important;
+}
+
+.Draftail--text-alignment-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  min-width: 180px;
+  max-height: 260px;
+  overflow: hidden;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  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);
+}
+
+.Draftail--text-alignment-dropdown[aria-expanded='true'] {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  overflow: inherit;
+}
+
+.Draftail--text-alignment-option {
+  z-index: 10;
+}
+
+.Draftail--text-alignment-icon {
+  font-family: serif;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.Draftail-block--ALIGNMENT_LEFT {
+  text-align: start;
+}
+
+.Draftail-block--ALIGNMENT_CENTER {
+  text-align: center;
+}
+
+.Draftail-block--ALIGNMENT_RIGHT {
+  text-align: end;
+}
+
+.Draftail-block--ALIGNMENT_JUSTIFY {
+  text-align: justify;
+}
+
+.Draftail-block--ALIGNMENT_LEFT > *,
+.Draftail-block--ALIGNMENT_CENTER > *,
+.Draftail-block--ALIGNMENT_RIGHT > *,
+.Draftail-block--ALIGNMENT_JUSTIFY > * {
+  text-align: inherit;
+}

draftail_text_utils/static/draftail_text_utils/css/text_color.css

@@ -0,0 +1,117 @@
+/* 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 */
+/* stylelint-disable selector-type-no-unknown */
+.Draftail--text-color-control {
+  cursor: default !important;
+  position: relative;
+  display: inline-block;
+  margin-inline-end: 0.625rem;
+  background: none !important;
+  border-width: 0 !important;
+  outline-width: 0 !important;
+}
+
+.Draftail--text-color-input-wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+input.Draftail--text-color-input {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  height: 1.875rem;
+  font-size: 1rem;
+  padding-inline: 0.25rem;
+}
+
+input.Draftail--text-color-input::placeholder {
+  font-size: 0.75rem;
+  text-align: center;
+  top: -0.09375rem;
+  position: relative;
+}
+
+.Draftail--text-color-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+}
+
+.Draftail--text-color-dropdown[aria-expanded='false'] {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.Draftail--text-color-dropdown[aria-expanded='true'] {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  min-width: calc((1.875rem * 4) + 24px);
+  max-height: 260px;
+  overflow: inherit;
+  margin: 0;
+  padding: 0.5rem 4px;
+  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);
+}
+
+.Draftail--text-color-option-wrapper {
+  flex: 1 0 calc(25% - 12px);
+}
+
+.Draftail--text-color-option {
+  position: relative;
+  background: attr(name type(<color>), black) !important;
+  border: 0.3125rem solid var(--w-color-surface-menu-hover, #e8e8e8);
+}
+
+.Draftail--text-color-option:hover,
+.Draftail--text-color-option.Draftail-ToolbarButton--active {
+  border: 0.3125rem solid var(--w-color-text-button-outline-default, #007d7e) !important;
+}
+
+.Draftail--text-color-hr {
+  width: 100%;
+}
+
+.Draftail--text-color-option > .Draftail-ToolbarButton__label {
+  display: none;
+}
+
+.Draftail--text-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);
+}
+
+color-input::part(gamut) {
+  display: none !important;
+}
+
+color-input::part(panel) {
+  max-inline-size: 15rem;
+}

draftail_text_utils/static/draftail_text_utils/js/font_family.js

@@ -0,0 +1,149 @@
+// 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 || {};
+  var options = data.customFontFamilies || [];
+  const type_ = 'font-family';
+  const control = JSON.parse(
+    document.getElementById(`draftail-plugin-control-${type_}`).textContent,
+  );
+
+  // ── Helper to find active font family ──
+  function getActiveOption(editorState) {
+    const currentStyle = editorState.getCurrentInlineStyle();
+    return options.find((opt) => currentStyle.has(opt.type));
+  }
+
+  class FontFamilyControl 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 font family ──
+    handleOptionClick = (opt) => {
+      const { getEditorState, onChange } = this.props;
+      let newState = getEditorState();
+      const currentStyle = newState.getCurrentInlineStyle();
+
+      // Remove any active font-family styles first
+      options.forEach((item) => {
+        if (currentStyle.has(item.type)) {
+          newState = RichUtils.toggleInlineStyle(newState, item.type);
+        }
+      });
+
+      // Apply the selected one
+      newState = RichUtils.toggleInlineStyle(newState, opt.type);
+      onChange(newState);
+
+      // Close the dropdown
+      this.setState({ isOpen: false });
+    };
+
+    render() {
+      const { getEditorState } = this.props;
+      const editorState = getEditorState();
+      const activeOption = getActiveOption(editorState);
+      const isOpen = this.state.isOpen;
+      const icon = `#icon-${control.icon}`;
+
+      // ── Dropdown list ──
+      const dropdown = React.createElement(
+        'ul',
+        {
+          'className': 'Draftail--font-family-dropdown',
+          'aria-expanded': isOpen,
+        },
+        options.map((opt) =>
+          React.createElement(
+            'li',
+            {
+              'key': opt.type,
+              'onMouseDown': (e) => {
+                // Prevent the blur on the button before the click is processed
+                e.preventDefault();
+                this.handleOptionClick(opt);
+              },
+              'style': { fontFamily: opt.style.fontFamily },
+              'className': 'Draftail--font-family-option',
+              'aria-selected': activeOption
+                ? activeOption.type === opt.type
+                : false,
+            },
+            opt.label,
+          ),
+        ),
+      );
+
+      // ── Toolbar button ──
+      const button = React.createElement(ToolbarButton, {
+        name: control.type.toUpperCase(),
+        active: !!activeOption,
+        title: activeOption ? activeOption.label : control.label,
+        icon: icon,
+        tooltipDirection: 'up',
+        onClick: () => this.toggleDropdown(),
+      });
+
+      return React.createElement(
+        'div',
+        {
+          className: 'Draftail--font-family-control',
+          ref: this.controlRef,
+        },
+        dropdown,
+        button,
+      );
+    }
+  }
+
+  window.draftail.registerPlugin(
+    {
+      type: control.type,
+      inline: FontFamilyControl,
+    },
+    'controls',
+  );
+})();