@uva-glass/component-library/dist/components/RteEditor/RteEditor.stories.js

React components UvA

import { jsxs as o, Fragment as s, jsx as e } from "react/jsx-runtime";
import { useState as d } from "react";
import { RteEditor as r } from "./RteEditor.js";
import { MOCK_RTE_CONTENT as m } from "./mockRteContent.js";
import { Container as u } from "../../storyComponents/Container/Container.js";
const g = `<RteEditor
          initialValue=""
          currentLanguage="NL"
          label=""
          info=""
          placeholder=""
          notValidatedText=""
          onChange={handleChange}
        />`, v = {
  title: "Organisms/RteEditor",
  component: r,
  parameters: {
    inspectComponent: r,
    codeString: g
  }
}, p = (t) => {
  const [n, i] = d(t.initialValue || "");
  return /* @__PURE__ */ o(s, { children: [
    /* @__PURE__ */ e(u, { size: "large-full-height", children: /* @__PURE__ */ e(r, { ...t, onChange: (l) => i(l) }) }),
    /* @__PURE__ */ e("br", {}),
    /* @__PURE__ */ e("br", {}),
    /* @__PURE__ */ e("p", { style: { margin: "0", marginTop: "2rem" }, children: "HTML Output:" }),
    /* @__PURE__ */ e(
      "div",
      {
        style: {
          marginTop: "0rem",
          padding: "1rem",
          backgroundColor: "#F9F9F9",
          borderRadius: "0.25rem",
          color: "#666"
        },
        children: n
      }
    )
  ] });
}, c = p.bind({});
c.args = {
  placeholder: "Voeg hier tekst in...",
  currentLanguage: "NL",
  label: "Studiemateriaal",
  info: "Studiemateriaal is essentieel voor succesvol leren. Het omvat boeken, artikelen, video's en oefeningen die studenten helpen hun kennis te vergroten, vaardigheden te ontwikkelen en hun studieprestaties te verbeteren.",
  required: !0,
  maxWords: 100,
  initialValue: m
};
const C = () => {
  const [t, n] = d("Editor 1 <ul><li>aap</li> <li>noot</li> <li>mies</li></ul>"), [i, l] = d("<p>Editor 2</p>");
  return /* @__PURE__ */ o(
    "div",
    {
      style: {
        display: "flex",
        flexDirection: "row",
        gap: "1rem",
        width: "100%",
        padding: "1rem",
        backgroundColor: "#FFF"
      },
      children: [
        /* @__PURE__ */ o("div", { style: { flex: "1" }, children: [
          /* @__PURE__ */ e(
            r,
            {
              initialValue: t,
              label: "Editor 1",
              info: "Uitleg over editor 1",
              placeholder: "Voeg hier tekst in...",
              notValidatedText: "",
              onChange: (a) => n(a)
            }
          ),
          /* @__PURE__ */ e("br", {}),
          /* @__PURE__ */ e("p", { style: { margin: "0", marginTop: "2rem" }, children: "HTML Output:" }),
          /* @__PURE__ */ e(
            "div",
            {
              style: {
                marginTop: "0rem",
                padding: "1rem",
                backgroundColor: "#F9F9F9",
                borderRadius: "0.25rem",
                color: "#666"
              },
              children: t
            }
          )
        ] }),
        /* @__PURE__ */ o("div", { style: { flex: "1" }, children: [
          /* @__PURE__ */ e(
            r,
            {
              initialValue: i,
              label: "Editor 2",
              info: "Uitleg over editor 2 wat langer om te kijken of dat ook goed gaat, want je weet maar nooit.",
              placeholder: "Voeg hier tekst in...",
              notValidatedText: "",
              onChange: (a) => l(a)
            }
          ),
          /* @__PURE__ */ e("br", {}),
          /* @__PURE__ */ e("p", { style: { margin: "0", marginTop: "2rem" }, children: "HTML Output:" }),
          /* @__PURE__ */ e(
            "div",
            {
              style: {
                marginTop: "0rem",
                padding: "1rem",
                backgroundColor: "#F9F9F9",
                borderRadius: "0.25rem",
                color: "#666"
              },
              children: i
            }
          )
        ] })
      ]
    }
  );
};
export {
  C as MultipleRteEditors,
  c as RteEditorExample,
  v as default
};
//# sourceMappingURL=RteEditor.stories.js.map