@wordpress/block-editor
Version:
127 lines (126 loc) • 4.07 kB
JavaScript
// packages/block-editor/src/components/rich-text/multiline.js
import { forwardRef } from "@wordpress/element";
import deprecated from "@wordpress/deprecated";
import { useDispatch, useSelect } from "@wordpress/data";
import { ENTER } from "@wordpress/keycodes";
import { create, split, toHTMLString } from "@wordpress/rich-text";
import { RichTextWrapper } from "./";
import { store as blockEditorStore } from "../../store";
import { useBlockEditContext } from "../block-edit";
import { getMultilineTag } from "./utils";
import { jsx } from "react/jsx-runtime";
function RichTextMultiline({
children,
identifier,
tagName: TagName = "div",
value = "",
onChange,
multiline,
...props
}, forwardedRef) {
deprecated("wp.blockEditor.RichText multiline prop", {
since: "6.1",
version: "6.3",
alternative: "nested blocks (InnerBlocks)",
link: "https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/"
});
const { clientId } = useBlockEditContext();
const { getSelectionStart, getSelectionEnd } = useSelect(blockEditorStore);
const { selectionChange } = useDispatch(blockEditorStore);
const multilineTagName = getMultilineTag(multiline);
value = value || `<${multilineTagName}></${multilineTagName}>`;
const padded = `</${multilineTagName}>${value}<${multilineTagName}>`;
const values = padded.split(
`</${multilineTagName}><${multilineTagName}>`
);
values.shift();
values.pop();
function _onChange(newValues) {
onChange(
`<${multilineTagName}>${newValues.join(
`</${multilineTagName}><${multilineTagName}>`
)}</${multilineTagName}>`
);
}
return /* @__PURE__ */ jsx(TagName, { ref: forwardedRef, children: values.map((_value, index) => {
return /* @__PURE__ */ jsx(
RichTextWrapper,
{
identifier: `${identifier}-${index}`,
tagName: multilineTagName,
value: _value,
onChange: (newValue) => {
const newValues = values.slice();
newValues[index] = newValue;
_onChange(newValues);
},
isSelected: void 0,
onKeyDown: (event) => {
if (event.keyCode !== ENTER) {
return;
}
event.preventDefault();
const { offset: start } = getSelectionStart();
const { offset: end } = getSelectionEnd();
if (typeof start !== "number" || typeof end !== "number") {
return;
}
const richTextValue = create({ html: _value });
richTextValue.start = start;
richTextValue.end = end;
const array = split(richTextValue).map(
(v) => toHTMLString({ value: v })
);
const newValues = values.slice();
newValues.splice(index, 1, ...array);
_onChange(newValues);
selectionChange(
clientId,
`${identifier}-${index + 1}`,
0,
0
);
},
onMerge: (forward) => {
const newValues = values.slice();
let offset = 0;
if (forward) {
if (!newValues[index + 1]) {
return;
}
newValues.splice(
index,
2,
newValues[index] + newValues[index + 1]
);
offset = newValues[index].length - 1;
} else {
if (!newValues[index - 1]) {
return;
}
newValues.splice(
index - 1,
2,
newValues[index - 1] + newValues[index]
);
offset = newValues[index - 1].length - 1;
}
_onChange(newValues);
selectionChange(
clientId,
`${identifier}-${index - (forward ? 0 : 1)}`,
offset,
offset
);
},
...props
},
index
);
}) });
}
var multiline_default = forwardRef(RichTextMultiline);
export {
multiline_default as default
};
//# sourceMappingURL=multiline.js.map