@stesura/react-wordgard 0.0.0-stage → 0.2.0

package/dist/decorations/iterDeco.js

@@ -0,0 +1,406 @@
+// Named after react-prosemirror's iterDeco, rewritten for Wordgard: lays out a plot's content from
+// DecoIterator, as Wordgard's ContentUpdate.build does. A plot that kept its identity outside the
+// redrawn ranges keeps its previous layout.
+import { Attributes, Elt, Leaf, Mark } from "wordgard/doc";
+import { Widget } from "wordgard/editor";
+import { isKept, pointMapper, samePlace, unchangedEnds } from "../changes.js";
+import { moveCell } from "../contexts/RenderStoreContext.js";
+import { childViewKeys, createNodeKey } from "../reactKeys.js";
+import { documentMark, renderMarkWrapper, renderWrapper, spanningOf, } from "./DecoIterator.js";
+import { isReactMark } from "./ReactMarkType.js";
+import { isReactWidget } from "./ReactWidgetType.js";
+import { isReactWrapper } from "./ReactWrapperType.js";
+// The wrappers of the marks the cursor types with (ContentUpdate.composition
+// opens only those with an element).
+export const cursorWrappers = (marks) => marks
+    .filter((mark) => mark.type.element)
+    .map((mark) => wrapperView(renderMarkWrapper(mark), mark.type.spanning, mark));
+// A React mark's component gets its mark, and draws only runs of it.
+const wrapperView = (elt, spanning, mark) => mark && isReactMark(elt) ? { elt, spanning, mark: documentMark(mark) } : { elt, spanning };
+const sameMark = (a, b) => a == b || (!!a && !!b && a.eq(b));
+// buildNodeShape's rule: in editable content, the outermost element without a
+// content hole becomes uneditable, unless it's a void element, and so does
+// what it holds.
+export const uneditable = (shape, inEditable) => {
+    if (!inEditable || shape.hasContent)
+        return { shape, inEditable };
+    if (Attributes.get(shape.attrs, "contenteditable") == null &&
+        !/^(br|hr|img|input|wbr)$/i.test(shape.tagName))
+        shape = Elt.create(shape.tagName, Attributes.merge(shape.attrs, ["contenteditable", "false"]), shape.children);
+    return { shape, inEditable: false };
+};
+// Whether React can skip a node view: it would draw the same thing.
+export const sameNodeView = (a, b) => a == b || (a.node == b.node && a.children == b.children && a.shape.eq(b.shape));
+// Whether two views draw the same thing.
+const sameView = (view, other) => {
+    if (view == other)
+        return true;
+    switch (view.type) {
+        case "node":
+            return other.type == "node" && view.key == other.key && sameNodeView(view, other);
+        case "text":
+            return other.type == "text" && view.text == other.text;
+        case "wrapper":
+            return (other.type == "wrapper" &&
+                view.key == other.key &&
+                view.spanning == other.spanning &&
+                view.elt.eq(other.elt) &&
+                sameMark(view.mark, other.mark) &&
+                view.children.length == other.children.length &&
+                view.children.every((child, i) => {
+                    const match = other.children[i];
+                    return !!match && sameView(child, match);
+                }));
+        case "buffer":
+            return other.type == "buffer" && view.side == other.side;
+        case "widget":
+            return (other.type == "widget" &&
+                view.side == other.side &&
+                view.key == other.key &&
+                view.offset == other.offset &&
+                view.widget.eq(other.widget));
+        case "composition":
+            return (other.type == "composition" && view.key == other.key && view.rendered == other.rendered);
+        case "trailingHack":
+            return other.type == "trailingHack";
+    }
+};
+// What makes a list draw as before: the same keys, each for the same view or
+// for a node that kept its cell (moveCell). A list whose shape is another's
+// last one's shares it.
+const shapes = new WeakMap();
+export const shapeOf = (views) => shapes.get(views) ?? views;
+// A plot's content laid out again, keeping the old view of each child that
+// draws the same, matched by its React key (which React keeps the component
+// for), and the old list when they all do. A wrapper that changed keeps the
+// children that didn't. React then skips what's kept (the views' memos): a
+// plot can change while its content doesn't (a paragraph's alignment, a mark
+// on its tag), and typing changes one text run of a paragraph. A node that
+// keeps its key keeps its cell, so a list whose shape is the same isn't drawn
+// again for it. `after` holds `before`'s first `head` and last `tail` views
+// (iterDeco's unchanged ends, all nodes): only the middle is matched. Writes
+// what it keeps into `after`.
+const keepSame = (store, before, after, head = 0, tail = 0) => {
+    const whole = !head && !tail;
+    const old = new Map(childViewKeys(whole ? before : before.slice(head, before.length - tail)).map(({ view, key }) => [key, view]));
+    let changed = before.length != after.length;
+    let sameShape = !changed;
+    childViewKeys(whole ? after : after.slice(head, after.length - tail)).forEach(({ view, key }, at) => {
+        const i = head + at;
+        const match = old.get(key);
+        let found = view;
+        if (match && sameView(match, view))
+            found = match;
+        else if (match?.type == "wrapper" &&
+            view.type == "wrapper" &&
+            match.elt.eq(view.elt) &&
+            sameMark(match.mark, view.mark))
+            keepSame(store, match.children, view.children);
+        if (match?.type == "node" && found.type == "node")
+            moveCell(store, match, found);
+        if (found != before[i]) {
+            changed = true;
+            if (found.type != "node" || match != before[i])
+                sameShape = false;
+        }
+        after[i] = found;
+    });
+    if (!changed) {
+        shapes.set(after, shapeOf(before));
+        return before;
+    }
+    if (sameShape)
+        shapes.set(after, shapeOf(before));
+    return after;
+};
+const isPoint = (view) => view?.type == "buffer" || view?.type == "widget";
+// A spanning wrapper continues the previous sibling when it draws the same
+// element, taking in the points between them (ContentUpdate.enterSpanning,
+// minus a Wordgard bug: docs/wordgard-upstream-bugs.md).
+const openWrapper = (views, { elt, spanning, mark }) => {
+    let i = views.length - 1;
+    while (isPoint(views[i]))
+        i--;
+    const prev = views[i];
+    if (spanning &&
+        prev?.type == "wrapper" &&
+        prev.spanning &&
+        prev.elt.eq(elt) &&
+        sameMark(prev.mark, mark)) {
+        prev.children.push(...views.splice(i + 1));
+        return prev;
+    }
+    const wrapper = { type: "wrapper", elt, spanning, children: [] };
+    if (mark)
+        wrapper.mark = mark;
+    views.push(wrapper);
+    return wrapper;
+};
+// Adjacent text in the same wrapper is one text node (ContentUpdate.addText).
+const addText = (views, text) => {
+    const last = views.at(-1);
+    if (last?.type == "text")
+        last.text += text;
+    else
+        views.push({ type: "text", text });
+};
+// ensureHackNode: a textblock or inline plot needs a trailing <br> when it ends,
+// looking inside wrappers and past widgets out of the flow, in nothing or in a
+// <br>. Undefined when `views` holds nothing to decide on. Unlike Wordgard, a
+// widget rendering a <br> counts as content: its DOM doesn't exist yet.
+const needsTrailingHack = (views) => {
+    for (let i = views.length - 1; i >= 0; i--) {
+        const view = views[i];
+        if (!view)
+            continue;
+        if (view.type == "wrapper") {
+            const found = needsTrailingHack(view.children);
+            if (found !== undefined)
+                return found;
+        }
+        else if (view.type == "widget") {
+            if (view.widget.type.inFlow)
+                return false;
+        }
+        else if (view.type == "node") {
+            const { shape, children } = view;
+            if (!(shape instanceof Elt)) {
+                if (shape.type.inFlow)
+                    return false;
+                continue;
+            }
+            if (!children)
+                return shape.tagName.toLowerCase() == "br";
+            // Structure around a plot's content is skipped, so the plot decides only
+            // when the hole is a direct child (its content, an inline plot's, ends in
+            // a buffer); otherwise the scan goes on before it.
+            if (shape.children.includes(0)) {
+                const found = needsTrailingHack(children);
+                if (found !== undefined)
+                    return found;
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    return undefined;
+};
+// Whether views laid out with `head` and `tail` views of a flat layout kept
+// are flat.
+const isFlat = (plot, views, head, tail) => {
+    if (plot.isTextblock || plot.isInline || views.length != plot.content.length)
+        return false;
+    for (let i = head; i < views.length - tail; i++)
+        if (views[i]?.type != "node")
+            return false;
+    return true;
+};
+// The keys of a plot's React point widgets, by position. Each keeps the key of
+// an old one its position maps to, as Wordgard keeps an old widget there
+// (TilePointer.matchingWidget): an equal one on the same side, else one of the
+// same type, which React re-renders in place.
+const pointKeys = (context, old, oldStart) => {
+    const byPos = new Map();
+    if (old && oldStart !== null && context.changes) {
+        const map = pointMapper(context.changes);
+        const collect = (views) => {
+            for (const view of views) {
+                if (view.type == "wrapper")
+                    collect(view.children);
+                else if (view.type == "widget" && view.offset !== undefined)
+                    for (const pos of map(oldStart + view.offset)) {
+                        const found = byPos.get(pos);
+                        if (found)
+                            found.push(view);
+                        else
+                            byPos.set(pos, [view]);
+                    }
+            }
+        };
+        collect(old.views);
+    }
+    const used = new Set();
+    return (pos, widget, side) => {
+        const candidates = (byPos.get(pos) ?? []).filter((view) => Math.sign(view.side) == Math.sign(side) && view.key && !used.has(view.key));
+        const found = candidates.find((view) => view.widget.eq(widget)) ??
+            candidates.find((view) => view.widget.type == widget.type);
+        const key = found?.key ?? createNodeKey();
+        used.add(key);
+        return key;
+    };
+};
+const sources = (wrappers) => wrappers.map((src) => wrapperView(renderWrapper(src), spanningOf(src), src instanceof Mark ? src : undefined));
+// A plot's content, from position `start`, for plots whose shape has a hole.
+export const iterDeco = (context, plot, start, parent = { start: 0, oldStart: 0 }) => {
+    const end = start + plot.contentLength;
+    const oldStartOf = (layout) => layout && parent.oldStart !== null ? parent.oldStart + layout.offset : null;
+    // Kept only from the same place: a plot object can appear more than once.
+    const fromLast = (layout) => layout?.pass == context.pass ? undefined : layout;
+    const previous = fromLast(context.layouts.get(plot));
+    const previousStart = oldStartOf(previous);
+    if (previous &&
+        context.changes &&
+        previousStart !== null &&
+        samePlace(context.changes, previousStart, start) &&
+        !context.composing.has(plot) &&
+        isKept(context.changes, start, end)) {
+        previous.offset = start - parent.start;
+        previous.pass = context.pass;
+        return previous.views;
+    }
+    // The layout this plot replaces, and where it started.
+    const oldPlot = context.replaced.get(plot) ?? plot;
+    const old = fromLast(context.layouts.get(oldPlot));
+    const oldStart = oldStartOf(old);
+    const nodeKeys = context.store.keys.get(plot);
+    if (!nodeKeys)
+        throw new Error(`No keys for ${plot.name}`);
+    // A flat plot's unchanged ends keep their views; the walk covers the rest.
+    let head = 0;
+    let tail = 0;
+    // A plot object can appear more than once: only its layout from this place.
+    if (old?.flat &&
+        oldStart !== null &&
+        context.changes &&
+        samePlace(context.changes, oldStart, start) &&
+        !context.composing.has(plot))
+        ({ head, tail } = unchangedEnds(context.changes, oldPlot, oldStart, plot));
+    const content = plot.content;
+    const middle = content.length - tail;
+    let from = start;
+    for (let i = 0; i < head; i++)
+        from += content[i]?.length ?? 0;
+    let to = end;
+    for (let i = middle; i < content.length; i++)
+        to -= content[i]?.length ?? 0;
+    const views = old && head ? old.views.slice(0, head) : [];
+    const plots = [];
+    // Where the walk is, for point widgets.
+    let at = start;
+    let keyAt = null;
+    const indexAt = new Map();
+    for (let index = head, offset = from; index < middle; index++) {
+        indexAt.set(offset, index);
+        offset += content[index]?.length ?? 0;
+    }
+    const wrapped = (wrappers) => {
+        let target = views;
+        for (const view of wrappers) {
+            const wrapper = openWrapper(target, view);
+            if (view.key)
+                wrapper.key = view.key;
+            target = wrapper.children;
+        }
+        return target;
+    };
+    const nodeView = (node, shape, pos) => {
+        const key = nodeKeys[indexAt.get(pos) ?? -1];
+        if (key === undefined)
+            throw new Error(`No key for ${node.name}`);
+        return { type: "node", node, key, shape, children: null };
+    };
+    const walker = {
+        enter: (node, shape, wrappers, pos) => {
+            const view = nodeView(node, shape, pos);
+            wrapped(sources(wrappers)).push(view);
+            plots.push({ view, plot: node, pos });
+            at = pos + node.length;
+            return false;
+        },
+        leave: () => { },
+        node: (node, shape, wrappers, partial, pos) => {
+            if (partial !== undefined)
+                throw new Error(`react-wordgard can't render part of ${node.name}`);
+            at = pos + node.length;
+            // Wordgard 0.6.2 can leave empty text leaves; React draws nothing for them
+            // (docs/wordgard-upstream-bugs.md).
+            if (node.is(Leaf.Text) && !node.param)
+                return;
+            let target = wrapped(sources(wrappers));
+            if (!node.is(Leaf.Text)) {
+                target.push(nodeView(node, shape, pos));
+                return;
+            }
+            // A text node's attributes and wrappers become spanning wrappers.
+            while (shape instanceof Elt) {
+                if (isReactWrapper(shape))
+                    throw new Error("A React wrapper can't wrap text");
+                const elt = Elt.create(shape.tagName, shape.attrs, [0]);
+                target = openWrapper(target, { elt, spanning: true }).children;
+                const [inner] = shape.children;
+                if (inner === undefined || inner === 0 || typeof inner == "string")
+                    throw new Error("Unexpected text shape");
+                shape = inner;
+            }
+            addText(target, node.param);
+        },
+        nodePart: (node) => {
+            throw new Error(`react-wordgard can't render part of ${node.name}`);
+        },
+        widget: (widget, side, point) => {
+            if (widget == Widget.img)
+                views.push({ type: "buffer", side: side < 0 ? -1 : 1 });
+            else if (point && isReactWidget(widget)) {
+                keyAt ??= pointKeys(context, old, oldStart);
+                views.push({
+                    type: "widget",
+                    widget,
+                    side,
+                    key: keyAt(at, widget, side),
+                    offset: at - start,
+                });
+            }
+            else
+                views.push({ type: "widget", widget, side });
+        },
+    };
+    const { composition } = context;
+    if (composition?.plot == plot) {
+        const from = start + composition.layout.from;
+        context.deco.walk(start, true, from, walker);
+        const target = wrapped(composition.layout.wrappers);
+        if (composition.layout.cursor)
+            target.push({ type: "buffer", side: -1 });
+        else
+            target.push({
+                type: "composition",
+                key: composition.rendered?.key ?? "composition",
+                rendered: composition.rendered?.text ?? null,
+            });
+        at = start + composition.layout.to;
+        context.deco.walk(start + composition.layout.to, false, end, walker);
+    }
+    else {
+        context.deco.walk(from, true, to, walker);
+    }
+    for (const { view, plot, pos } of plots)
+        view.children = iterDeco(context, plot, pos + 1, { start, oldStart });
+    if (old && tail) {
+        views.push(...old.views.slice(old.views.length - tail));
+        // The layouts inside moved with their plots.
+        for (let i = middle, pos = to; i < content.length; i++) {
+            const child = content[i];
+            if (!child)
+                continue;
+            const layout = child.isPlot ? context.layouts.get(child) : undefined;
+            if (layout) {
+                layout.offset = pos + 1 - start;
+                layout.pass = context.pass;
+            }
+            pos += child.length;
+        }
+    }
+    if ((plot.isTextblock || plot.isInline) && needsTrailingHack(views) !== false)
+        views.push({ type: "trailingHack" });
+    // From this place only: two copies of a plot mustn't share view objects.
+    const fromHere = old && oldStart !== null && context.changes && samePlace(context.changes, oldStart, start);
+    const laid = old && fromHere ? keepSame(context.store, old.views, views, head, tail) : views;
+    context.layouts.set(plot, {
+        offset: start - parent.start,
+        pass: context.pass,
+        views: laid,
+        flat: isFlat(plot, laid, head, tail),
+    });
+    return laid;
+};

package/dist/helpers/attributes.d.ts

@@ -0,0 +1,2 @@
+import type { Attributes } from "wordgard/doc";
+export declare const attrsToRecord: (attrs: Attributes) => Record<string, string>;

package/dist/helpers/attributes.js

@@ -0,0 +1,11 @@
+// Wordgard's attributes are a flat [name, value, ...] array.
+export const attrsToRecord = (attrs) => {
+    const record = {};
+    for (let i = 0; i + 1 < attrs.length; i += 2) {
+        const name = attrs[i];
+        const value = attrs[i + 1];
+        if (name !== undefined && value !== undefined)
+            record[name] = value;
+    }
+    return record;
+};

package/dist/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export { attrsToRecord } from "./attributes.js";
+export { componentProps, htmlAttrsToReactProps } from "./props.js";

package/dist/helpers/index.js

@@ -0,0 +1,2 @@
+export { attrsToRecord } from "./attributes.js";
+export { componentProps, htmlAttrsToReactProps } from "./props.js";

package/dist/helpers/props.d.ts

@@ -0,0 +1,8 @@
+import { type CSSProperties, HTMLProps } from "react";
+/**
+ * Given a record of HTML attributes, returns tho
+ * equivalent React props.
+ */
+export declare const htmlAttrsToReactProps: (attrs: Record<string, string>) => HTMLProps<HTMLElement>;
+export declare const cssToStyle: (css: string | undefined) => CSSProperties;
+export declare const componentProps: (attrs: Record<string, string>) => HTMLProps<HTMLElement>;

package/dist/helpers/props.js

@@ -0,0 +1,248 @@
+// Adapted from react-prosemirror, for Wordgard: `draggable`, `hidden`,
+// `colspan` and `rowspan` render as Wordgard's own setAttribute does (shape
+// attributes, such as an image's `draggable="false"`, go through here).
+// mergeReactProps is left out: nothing uses it.
+let patched = false;
+const patchConsoleError = () => {
+    if (patched)
+        return;
+    const consoleError = console.error;
+    console.error = (...data) => {
+        const [message, prop, correction] = data;
+        if (typeof message === "string" &&
+            message.includes("Invalid DOM property `%s`. Did you mean `%s`?") &&
+            prop === "STYLE" &&
+            correction === "style") {
+            return;
+        }
+        consoleError(...data);
+    };
+    patched = true;
+};
+/**
+ * Given a record of HTML attributes, returns tho
+ * equivalent React props.
+ */
+export const htmlAttrsToReactProps = (attrs) => {
+    patchConsoleError();
+    const props = {};
+    for (const [attrName, attrValue] of Object.entries(attrs)) {
+        switch (attrName.toLowerCase()) {
+            case "class": {
+                props.className = attrValue;
+                break;
+            }
+            case "style": {
+                // HACK: React expects the `style` prop to be an
+                // object mapping from CSS property name to value.
+                // However, it will pass un-recognized props through
+                // to the underlying DOM element, and HTML attributes
+                // are case insensitive. So we use `STYLE` instead,
+                // which React doesn't intercept, but the DOM treats
+                // as `style`
+                props.STYLE = attrValue;
+                break;
+            }
+            case "autocapitalize": {
+                props.autoCapitalize = attrValue;
+                break;
+            }
+            case "contenteditable": {
+                if (attrValue === "" || attrValue === "true") {
+                    props.contentEditable = true;
+                    break;
+                }
+                if (attrValue === "false") {
+                    props.contentEditable = false;
+                    break;
+                }
+                if (attrValue === "plaintext-only") {
+                    props.contentEditable = "plaintext-only";
+                    break;
+                }
+                props.contentEditable = null;
+                break;
+            }
+            case "draggable": {
+                props.draggable = attrValue !== "false";
+                break;
+            }
+            case "enterkeyhint": {
+                props.enterKeyHint = attrValue;
+                break;
+            }
+            case "for": {
+                props.htmlFor = attrValue;
+                break;
+            }
+            case "hidden": {
+                props.hidden = true;
+                break;
+            }
+            case "inputmode": {
+                props.inputMode = attrValue;
+                break;
+            }
+            case "itemprop": {
+                props.itemProp = attrValue;
+                break;
+            }
+            case "spellcheck": {
+                if (attrValue === "" || attrValue === "true") {
+                    props.spellCheck = true;
+                    break;
+                }
+                if (attrValue === "false") {
+                    props.spellCheck = false;
+                    break;
+                }
+                props.spellCheck = null;
+                break;
+            }
+            case "colspan":
+            case "rowspan": {
+                const numValue = parseInt(attrValue, 10);
+                if (!Number.isNaN(numValue)) {
+                    props[attrName.toLowerCase() == "colspan" ? "colSpan" : "rowSpan"] = numValue;
+                }
+                break;
+            }
+            case "tabindex": {
+                const numValue = parseInt(attrValue, 10);
+                if (!Number.isNaN(numValue)) {
+                    props.tabIndex = numValue;
+                }
+                break;
+            }
+            case "autocomplete": {
+                props.autoComplete = attrValue;
+                break;
+            }
+            case "autofocus": {
+                props.autoFocus = attrValue != null;
+                break;
+            }
+            case "formaction": {
+                props.formAction = attrValue;
+                break;
+            }
+            case "formenctype": {
+                props.formEnctype = attrValue;
+                break;
+            }
+            case "formmethod": {
+                props.formMethod = attrValue;
+                break;
+            }
+            case "formnovalidate": {
+                props.formNoValidate = attrValue;
+                break;
+            }
+            case "formtarget": {
+                props.formTarget = attrValue;
+                break;
+            }
+            case "maxlength": {
+                const numValue = parseInt(attrValue, 10);
+                if (!Number.isNaN(numValue)) {
+                    props.maxLength = attrValue;
+                }
+                break;
+            }
+            case "minlength": {
+                const numValue = parseInt(attrValue, 10);
+                if (!Number.isNaN(numValue)) {
+                    props.minLength = attrValue;
+                }
+                break;
+            }
+            case "max": {
+                const numValue = parseInt(attrValue, 10);
+                if (!Number.isNaN(numValue)) {
+                    props.max = attrValue;
+                }
+                break;
+            }
+            case "min": {
+                const numValue = parseInt(attrValue, 10);
+                if (!Number.isNaN(numValue)) {
+                    props.min = attrValue;
+                }
+                break;
+            }
+            case "multiple": {
+                props.multiple = attrValue != null;
+                break;
+            }
+            case "readonly": {
+                props.readOnly = attrValue != null;
+                break;
+            }
+            case "required": {
+                props.required = attrValue != null;
+                break;
+            }
+            case "size": {
+                const numValue = parseInt(attrValue, 10);
+                if (!Number.isNaN(numValue)) {
+                    props.size = attrValue;
+                }
+                break;
+            }
+            case "step": {
+                if (attrValue === "any") {
+                    props.step = attrValue;
+                    break;
+                }
+                const numValue = parseInt(attrValue, 10);
+                if (!Number.isNaN(numValue) && numValue > 0) {
+                    props.step = attrValue;
+                }
+                break;
+            }
+            case "disabled": {
+                props.disabled = attrValue != null;
+                break;
+            }
+            case "rows": {
+                const numValue = parseInt(attrValue, 10);
+                if (!Number.isNaN(numValue)) {
+                    props.rows = attrValue;
+                }
+                break;
+            }
+            default: {
+                props[attrName] = attrValue;
+                break;
+            }
+        }
+    }
+    return props;
+};
+// A style attribute as React's style object, for merging with a component's:
+// `background-color` as `backgroundColor`, custom properties as they are.
+export const cssToStyle = (css) => {
+    const style = {};
+    for (const declaration of css?.split(";") ?? []) {
+        const colon = declaration.indexOf(":");
+        if (colon < 0)
+            continue;
+        const name = declaration.slice(0, colon).trim();
+        const value = declaration.slice(colon + 1).trim();
+        if (!name || !value)
+            continue;
+        const key = name.startsWith("--")
+            ? name
+            : name.replace(/^-ms-/, "ms-").replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+        style[key] = value;
+    }
+    return style;
+};
+// Not in react-prosemirror: the props a React decoration's component gets for
+// a root it draws by hand, Wordgard's style as an object it can merge with its
+// own (`STYLE`, a string, would overwrite its `style` when Wordgard's changes).
+export const componentProps = (attrs) => {
+    const { style, ...rest } = attrs;
+    const props = htmlAttrsToReactProps(rest);
+    return style ? { ...props, style: cssToStyle(style) } : props;
+};