@siratik/wp-component-library 0.1.0 → 0.1.2

package/components/variable-field/index.js

@@ -0,0 +1,592 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl } from "@wordpress/components";
+import {
+    forwardRef,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { DOWN, ENTER, ESCAPE, UP } from "@wordpress/keycodes";
+
+/**
+ * Internal dependencies
+ */
+import styled from "@emotion/styled";
+import { formatVariableToken, valueToChipHTML } from "./value-to-chip-html";
+
+// Styled components
+const StyledWrapper = styled.div`
+    position: relative;
+`;
+
+const StyledFieldContainer = styled.div`
+    width: 100%;
+    min-height: ${props => props.rows > 1 ? `${(props.rows * 28) + 16}px` : '36px'};
+    padding: 6px 8px;
+    border: 1px solid #757575;
+    border-radius: 2px;
+    background: #fff;
+    font-size: 13px;
+    font-family: inherit;
+    margin: 0;
+    line-height: 24px;
+    cursor: text;
+    display: inline-block;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    position: relative;
+    box-sizing: border-box;
+
+    &:empty:before {
+        content: attr(data-placeholder);
+        color: #757575;
+        pointer-events: none;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        padding: inherit;
+        word-wrap: break-word;
+        white-space: normal;
+        line-height: 24px;
+    }
+
+    &:focus {
+        border-color: var(--wp-admin-theme-color, #007cba);
+        box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
+        outline: 2px solid transparent;
+        caret-color: var(--wp-admin-theme-color, #007cba);
+    }
+
+    &.is-disabled {
+        background: #f0f0f0;
+        cursor: not-allowed;
+    }
+
+    .variable-chip {
+        display: inline-block;
+        background: #e0e0e0;
+        color: #1e1e1e;
+        border-radius: 4px;
+        padding: 2px 6px;
+        margin: 0 2px;
+        font-size: 12px;
+        white-space: nowrap;
+        user-select: none;
+        position: relative;
+        padding-right: 20px;
+        vertical-align: middle;
+        line-height: 20px;
+        transition: background-color 0.15s ease;
+        
+        &:hover {
+            background: #d0d0d0;
+        }
+        
+        &::before,
+        &::after {
+            content: '\\200B';
+            display: inline;
+            width: 0;
+        }
+    }
+
+    .chip-remove {
+        position: absolute;
+        right: 4px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        font-size: 14px;
+        line-height: 1;
+        opacity: 0.6;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+    }
+
+    .chip-remove:hover {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 2px;
+    }
+`;
+
+const StyledSuggestionsContainer = styled.div`
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 100100; /* Higher than WordPress panels (100000) */
+    margin-top: 4px;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    animation: fadeIn 0.15s ease-in-out;
+    
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-4px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+`;
+
+const StyledSuggestions = styled.div`
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 4px 0;
+`;
+
+const StyledSuggestion = styled.button`
+    display: block;
+    width: 100%;
+    padding: 6px 12px;
+    text-align: left;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: 13px;
+
+    &:hover,
+    &.is-selected {
+        background: var(--wp-admin-theme-color, #007cba);
+        color: #fff;
+    }
+`;
+
+// Hidden input for form submission
+const StyledHiddenInput = styled.input`
+    position: absolute;
+    left: -9999px;
+    opacity: 0;
+    pointer-events: none;
+`;
+
+/**
+ * The selection in the node's own window, so it also works inside the editor iframe.
+ *
+ * @param {Node|null} node
+ * @returns {Selection}
+ */
+const getSelectionFor = (node) =>
+    (node?.ownerDocument?.defaultView ?? window).getSelection();
+
+/**
+ * VariableField Component
+ */
+// eslint-disable-next-line no-shadow -- named for React DevTools.
+const VariableField = forwardRef(function VariableField(
+    {
+        value = "",
+        onChange,
+        options = [],
+        getOptionLabel = (option) =>
+            option.label || option.name || option.title,
+        getOptionValue = (option) => option.value || option.id,
+        placeholder = __(
+            "Type @ to view variable suggestions",
+            "wp-component-library",
+        ),
+        label,
+        help,
+        isDisabled = false,
+        className = "",
+        rows = 1,
+        ...props
+    },
+    ref,
+) {
+    const [suggestions, setSuggestions] = useState([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const containerRef = useRef();
+    const wrapperRef = useRef();
+    const hiddenInputRef = useRef();
+    const resolveChipLabel = useCallback(
+        (varName) => {
+            const token = formatVariableToken(varName);
+            const match = options.find((option) => {
+                const raw = getOptionValue(option);
+                const normalized = raw
+                    .replace(/^\{\{?/, "")
+                    .replace(/\}\}?$/g, "");
+
+                return raw === token || normalized === varName;
+            });
+
+            return match ? getOptionLabel(match) : varName;
+        },
+        [options, getOptionLabel, getOptionValue],
+    );
+
+    // Convert value to HTML with chips
+    const valueToHTML = useCallback(
+        (val) => valueToChipHTML(val, resolveChipLabel),
+        [resolveChipLabel]
+    );
+
+    // Get plain text from container
+    const getPlainText = useCallback(() => {
+        if (!containerRef.current) { return ""; }
+        
+        let text = "";
+        const nodes = containerRef.current.childNodes;
+        
+        nodes.forEach(node => {
+            if (node.nodeType === window.Node.TEXT_NODE) {
+                // Remove zero-width spaces from the text
+                text += node.textContent.replace(/\u200B/g, '');
+            } else if (node.classList && node.classList.contains("variable-chip")) {
+                const varName = node.getAttribute('data-variable') || node.firstChild.textContent;
+                text += formatVariableToken(varName.replace(/^\{\{?|\}\}?$/g, ""));
+            }
+        });
+        
+        return text.trim();
+    }, []);
+
+    // Initialize content
+    useEffect(() => {
+        if (containerRef.current && containerRef.current.ownerDocument.activeElement !== containerRef.current) {
+            const currentHTML = containerRef.current.innerHTML;
+            const newHTML = valueToHTML(value);
+            // Only update if content actually changed
+            if (currentHTML !== newHTML) {
+                containerRef.current.innerHTML = newHTML;
+            }
+        }
+    }, [value, valueToHTML]);
+
+    // Handle input changes
+    const handleInput = useCallback(() => {
+        const selection = getSelectionFor(containerRef.current);
+        
+        const plainValue = getPlainText();
+        
+        // Check for @ symbol - reuse existing selection
+        if (selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            const container = range.startContainer;
+            
+            // Only check for @ in text nodes, not in chips
+            if (container.nodeType === window.Node.TEXT_NODE) {
+                const textContent = container.textContent;
+                const offset = range.startOffset;
+                const textBeforeCursor = textContent.substring(0, offset);
+                const lastAt = textBeforeCursor.lastIndexOf("@");
+                
+                if (lastAt !== -1) {
+                    const searchTerm = textBeforeCursor.substring(lastAt + 1).toLowerCase();
+                    
+                    if (searchTerm === "") {
+                        // Just typed @
+                        setSuggestions(options);
+                        setShowSuggestions(true);
+                        setSelectedIndex(0);
+                    } else {
+                        // Typing after @
+                        const filtered = options.filter((option) => {
+                            const optionLabel = getOptionLabel(option).toLowerCase();
+                            return optionLabel.includes(searchTerm);
+                        });
+                        setSuggestions(filtered);
+                        setShowSuggestions(filtered.length > 0);
+                        setSelectedIndex(0);
+                    }
+                } else {
+                    setShowSuggestions(false);
+                }
+            } else {
+                setShowSuggestions(false);
+            }
+        }
+
+        onChange(plainValue);
+        if (hiddenInputRef.current) {
+            hiddenInputRef.current.value = plainValue;
+        }
+    }, [getPlainText, onChange, options, getOptionLabel]);
+
+    // Handle selecting a suggestion
+    const selectSuggestion = useCallback((option) => {
+        const selection = getSelectionFor(containerRef.current);
+        
+        if (selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            const container = range.startContainer;
+            
+            if (container.nodeType === window.Node.TEXT_NODE) {
+                const textContent = container.textContent;
+                const offset = range.startOffset;
+                const textBeforeCursor = textContent.substring(0, offset);
+                const lastAt = textBeforeCursor.lastIndexOf("@");
+                
+                if (lastAt !== -1) {
+                    // Replace @text with variable in the current text node
+                    const beforeAt = textContent.substring(0, lastAt);
+                    const afterCursor = textContent.substring(offset);
+                    
+                    // Build new value with variable
+                    const optionValue = getOptionValue(option);
+                    const cleanValue = optionValue
+                        .replace(/^\{\{?/, "")
+                        .replace(/\}\}?$/g, "");
+                    const varValue = formatVariableToken(cleanValue);
+                    
+                    // Replace text node content
+                    container.textContent = beforeAt + varValue + " " + afterCursor;
+                    
+                    // Trigger change
+                    const newValue = getPlainText();
+                    onChange(newValue);
+                    
+                    // Re-render with chips and restore focus
+                    containerRef.current.innerHTML = valueToHTML(newValue);
+                    
+                    // Place cursor after the inserted variable
+                    const allNodes = Array.from(containerRef.current.childNodes);
+                    let targetNode = null;
+                    let targetOffset = 0;
+                    
+                    // Find the last text node or create one if needed
+                    for (let i = allNodes.length - 1; i >= 0; i--) {
+                        if (allNodes[i].nodeType === window.Node.TEXT_NODE) {
+                            targetNode = allNodes[i];
+                            targetOffset = targetNode.textContent.length;
+                            break;
+                        }
+                    }
+                    
+                    if (targetNode) {
+                        const sel = getSelectionFor(containerRef.current);
+                        const newRange = document.createRange();
+                        newRange.setStart(targetNode, targetOffset);
+                        newRange.collapse(true);
+                        sel.removeAllRanges();
+                        sel.addRange(newRange);
+                    }
+                    
+                    // Keep focus on the field
+                    containerRef.current.focus();
+                }
+            }
+        }
+
+        setShowSuggestions(false);
+    }, [getOptionValue, onChange, valueToHTML, getPlainText]);
+
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        if (showSuggestions && suggestions.length > 0) {
+            switch (e.keyCode) {
+                case UP:
+                    e.preventDefault();
+                    setSelectedIndex((prev) => Math.max(0, prev - 1));
+                    return;
+                case DOWN:
+                    e.preventDefault();
+                    setSelectedIndex((prev) =>
+                        Math.min(suggestions.length - 1, prev + 1),
+                    );
+                    return;
+                case ENTER:
+                    e.preventDefault();
+                    if (suggestions[selectedIndex]) {
+                        selectSuggestion(suggestions[selectedIndex]);
+                    }
+                    return;
+                case ESCAPE:
+                    e.preventDefault();
+                    setShowSuggestions(false);
+                    return;
+            }
+        }
+        
+        // Handle backspace on chip boundaries
+        if (e.key === 'Backspace') {
+            const selection = getSelectionFor(containerRef.current);
+            if (selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                if (range.collapsed && range.startOffset === 0) {
+                    const node = range.startContainer;
+                    if (node.previousSibling && node.previousSibling.classList?.contains('variable-chip')) {
+                        e.preventDefault();
+                        node.previousSibling.remove();
+                        const newValue = getPlainText();
+                        onChange(newValue);
+                    }
+                }
+            }
+        }
+    }, [showSuggestions, suggestions, selectedIndex, selectSuggestion, getPlainText, onChange]);
+
+    // Handle paste — strip HTML and insert plain text only
+    const handlePaste = useCallback((e) => {
+        e.preventDefault();
+        const text = e.clipboardData.getData("text/plain");
+        if (!text) { return; }
+
+        const selection = getSelectionFor(containerRef.current);
+        if (!selection.rangeCount) { return; }
+
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        range.insertNode(document.createTextNode(text));
+
+        // Move cursor to end of inserted text
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+        // Trigger change
+        const newValue = getPlainText();
+        onChange(newValue);
+        if (hiddenInputRef.current) {
+            hiddenInputRef.current.value = newValue;
+        }
+    }, [getPlainText, onChange]);
+
+    // Handle chip removal
+    useEffect(() => {
+        const handleClick = (e) => {
+            if (e.target.classList.contains('chip-remove')) {
+                e.preventDefault();
+                e.stopPropagation();
+                const chip = e.target.parentElement;
+                
+                // Save cursor position before removal
+                const selection = getSelectionFor(containerRef.current);
+                const focusNode = selection.focusNode;
+                const focusOffset = selection.focusOffset;
+                
+                chip.remove();
+                const newValue = getPlainText();
+                onChange(newValue);
+                if (hiddenInputRef.current) {
+                    hiddenInputRef.current.value = newValue;
+                }
+                
+                // Restore focus to the field
+                containerRef.current.focus();
+                
+                // Try to restore cursor position
+                if (focusNode && containerRef.current.contains(focusNode.parentNode)) {
+                    const newRange = document.createRange();
+                    newRange.setStart(focusNode, Math.min(focusOffset, focusNode.textContent.length));
+                    newRange.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                }
+            }
+        };
+
+        const container = containerRef.current;
+        if (container) {
+            container.addEventListener('click', handleClick);
+            return () => container.removeEventListener('click', handleClick);
+        }
+    }, [getPlainText, onChange]);
+
+    // Close suggestions when clicking outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (
+                wrapperRef.current &&
+                !wrapperRef.current.contains(event.target)
+            ) {
+                setShowSuggestions(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () =>
+            document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    // Expose focus method to parent
+    useImperativeHandle(
+        ref,
+        () => ({
+            focus: () => {
+                containerRef.current?.focus();
+            },
+        }),
+        [],
+    );
+
+    return (
+        // eslint-disable-next-line @wordpress/no-base-control-with-label-without-id -- contenteditable field; see lint report.
+        <BaseControl
+            __nextHasNoMarginBottom
+            __next40pxDefaultSize
+            label={label}
+            help={help}
+            className={`variable-field ${className}`}
+        >
+            <StyledWrapper ref={wrapperRef}>
+                <StyledHiddenInput
+                    ref={hiddenInputRef}
+                    type="hidden"
+                    value={value}
+                    name={props.name}
+                />
+
+                <StyledFieldContainer
+                    ref={containerRef}
+                    contentEditable={!isDisabled}
+                    suppressContentEditableWarning
+                    className={isDisabled ? "is-disabled" : ""}
+                    onInput={handleInput}
+                    onKeyDown={handleKeyDown}
+                    onPaste={handlePaste}
+                    spellCheck={false}
+                    data-placeholder={!value ? placeholder : ""}
+                    rows={rows}
+                />
+
+                {showSuggestions && suggestions.length > 0 && (
+                    <StyledSuggestionsContainer>
+                        <StyledSuggestions>
+                            {suggestions.map((option, index) => (
+                                <StyledSuggestion
+                                    key={getOptionValue(option)}
+                                    className={
+                                        index === selectedIndex
+                                            ? "is-selected"
+                                            : ""
+                                    }
+                                    onMouseDown={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        selectSuggestion(option);
+                                    }}
+                                    onMouseEnter={() => setSelectedIndex(index)}
+                                >
+                                    {getOptionLabel(option)}
+                                </StyledSuggestion>
+                            ))}
+                        </StyledSuggestions>
+                    </StyledSuggestionsContainer>
+                )}
+            </StyledWrapper>
+        </BaseControl>
+    );
+});
+
+export { VariableField };

package/components/variable-field/value-to-chip-html.js

@@ -0,0 +1,38 @@
+/**
+ * Variable tokens and the editor markup built from them. Kept free of imports
+ * so it can be unit-tested without the component's WordPress dependencies.
+ */
+const VARIABLE_TOKEN_PATTERN =
+    /\{\{([a-zA-Z0-9_.-]+)\}\}|\{([a-zA-Z0-9_.-]+)\}/g;
+
+export const formatVariableToken = (name) => `{{${name}}}`;
+
+// Text and labels are user data; only the chip markup itself is HTML.
+const escapeText = (text) =>
+    String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+/**
+ * Editor markup for a value: its text escaped, each variable token as a chip.
+ *
+ * @param {string}   val              Stored value, e.g. "{{title}} | {{site_name}}".
+ * @param {Function} resolveChipLabel Variable name → chip label.
+ * @return {string} HTML for the contenteditable container.
+ */
+export const valueToChipHTML = (val, resolveChipLabel) => {
+    if (!val) { return ""; }
+    // Add zero-width spaces between elements for better cursor positioning
+    let html = escapeText(val).replace(
+        VARIABLE_TOKEN_PATTERN,
+        (match, doubleName, singleName) => {
+            const varName = doubleName || singleName;
+            const chipLabel = escapeText(resolveChipLabel(varName));
+
+            return `<span class="variable-chip" contenteditable="false" data-variable="${varName}">${chipLabel}<span class="chip-remove">×</span></span>`;
+        },
+    );
+    // Ensure there's always an editable space at the end
+    if (!html.endsWith('\u200B')) {
+        html += '\u200B';
+    }
+    return html;
+};

package/components/variable-inserter/README.md

@@ -0,0 +1,68 @@
+# VariableInserter Component
+
+A reusable component for inserting variable tags into text fields. Similar to Yoast's variable inserter but more flexible and customizable.
+
+## Usage
+
+```jsx
+import VariableInserter from "@siratik/wp-component-library/components/variable-inserter";
+
+const variables = [
+    { label: "Site Name", value: "{site_name}" },
+    { label: "Post Title", value: "{title}" },
+    { label: "Post Excerpt", value: "{excerpt}" },
+];
+
+<VariableInserter
+    variables={variables}
+    currentValue={currentValue}
+    onChange={setValue}
+    placeholder="Insert Variable"
+/>;
+```
+
+## Props
+
+| Prop           | Type     | Default             | Description                                                   |
+| -------------- | -------- | ------------------- | ------------------------------------------------------------- |
+| `variables`    | Array    | `[]`                | Array of variable objects with `label` and `value` properties |
+| `currentValue` | string   | `""`                | Current value of the text field                               |
+| `onChange`     | Function | -                   | Function to call when a variable is inserted                  |
+| `buttonProps`  | Object   | `{}`                | Props to pass to the button component                         |
+| `placeholder`  | string   | `"Insert Variable"` | Placeholder text for the button                               |
+| `className`    | string   | `""`                | Additional CSS classes                                        |
+| `size`         | string   | `"small"`           | Button size (`small`, `medium`, `large`)                      |
+| `variant`      | string   | `"tertiary"`        | Button variant (`primary`, `secondary`, `tertiary`)           |
+
+## Example with TextControl
+
+```jsx
+import { TextControl } from "@wordpress/components";
+import VariableInserter from "@siratik/wp-component-library/components/variable-inserter";
+
+const [value, setValue] = useState("");
+
+<Flex gap={2} align="flex-end">
+    <TextControl label="SEO Title" value={value} onChange={setValue} />
+    <VariableInserter
+        variables={seoVariables}
+        currentValue={value}
+        onChange={setValue}
+    />
+</Flex>;
+```
+
+## Variable Object Structure
+
+Each variable in the `variables` array should have:
+
+```jsx
+{
+    label: "Human readable name",
+    value: "{variable_tag}"
+}
+```
+
+## Styling
+
+The component includes built-in styles that work with WordPress admin theme. It supports both light and dark modes.