@tohuhono/puck-rich-text
Version:
A puck component for rich text editing made for OberonCMS
30 lines (29 loc) • 2.4 kB
JavaScript
(function() {
"use strict";
try {
if (typeof document != "undefined") {
var elementStyle = document.createElement("style");
elementStyle.appendChild(document.createTextNode("._ToolbarButton_5t106_1 {\n background: transparent;\n border: none;\n color: var(--puck-color-grey-08);\n cursor: pointer;\n padding: 6px 8px;\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 50ms ease-in;\n}\n\n._ToolbarButton_5t106_1:focus-visible {\n outline: 2px solid var(--puck-color-azure-05);\n outline-offset: -2px;\n}\n\n@media (hover: hover) {\n ._ToolbarButton_5t106_1:hover {\n color: var(--puck-color-azure-06);\n cursor: pointer;\n }\n}\n\n._ToolbarButton_5t106_1:active {\n color: var(--puck-color-azure-07);\n transition: none;\n}\n._DropdownMenu-content_15vwm_1 {\n background: var(--puck-color-grey-01);\n padding: 4px;\n border-radius: 8px;\n font-size: var(--puck-font-size-xxs);\n font-family: var(--puck-font-family);\n}\n\n._DropdownMenu-action_15vwm_9 {\n background: transparent;\n border: none;\n color: var(--puck-color-grey-07);\n cursor: pointer;\n padding: 6px 8px;\n border-radius: 4px;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 50ms ease-in;\n}\n\n._DropdownMenu-action_15vwm_9:focus-visible {\n outline: 2px solid var(--puck-color-azure-05);\n outline-offset: -2px;\n}\n\n@media (hover: hover) {\n ._DropdownMenu-action_15vwm_9:hover {\n background: var(--puck-color-grey-02);\n color: var(--puck-color-azure-05);\n cursor: pointer;\n }\n}\n\n._DropdownMenu-action_15vwm_9:active {\n color: var(--puck-color-azure-07);\n transition: none;\n}"));
document.head.appendChild(elementStyle);
}
} catch (e) {
console.error("vite-plugin-css-injected-by-js", e);
}
})();
import { jsx, Fragment } from "react/jsx-runtime";
import { Editor } from "./rich-text-editor/editor-client.js";
import { Render } from "./rich-text-editor/render-client.js";
const PuckRichText = {
fields: {
state: {
type: "custom",
render: () => /* @__PURE__ */ jsx(Fragment, {})
}
},
render: ({ puck, ...props }) => {
return puck.isEditing ? /* @__PURE__ */ jsx(Editor, { ...props }) : /* @__PURE__ */ jsx(Render, { ...props });
}
};
export {
PuckRichText
};