@baasix/lexical 0.0.2

package/dist/PollComponent-CWI5UJF5.css

@@ -0,0 +1,187 @@
+/* src/nodes/PollNode.css */
+.PollNode__container {
+  border: 1px solid #eee;
+  background-color: #fcfcfc;
+  border-radius: 10px;
+  max-width: 600px;
+  min-width: 400px;
+  cursor: pointer;
+  user-select: none;
+}
+.PollNode__container.focused {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PollNode__inner {
+  margin: 15px;
+  cursor: default;
+}
+.PollNode__heading {
+  margin-left: 0px;
+  margin-top: 0px;
+  margin-right: 0px;
+  margin-bottom: 15px;
+  color: #444;
+  text-align: center;
+  font-size: 18px;
+}
+.PollNode__optionContainer {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+  align-items: center;
+}
+.PollNode__optionInputWrapper {
+  display: flex;
+  flex: 10px;
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 5px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+.PollNode__optionInput {
+  display: flex;
+  flex: 1px;
+  border: 0px;
+  padding: 7px;
+  color: rgb(61, 135, 245);
+  background-color: transparent;
+  font-weight: bold;
+  outline: 0px;
+  z-index: 0;
+}
+.PollNode__optionInput::placeholder {
+  font-weight: normal;
+  color: #999;
+}
+.PollNode__optionInputVotes {
+  background-color: rgb(236, 243, 254);
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  transition: width 1s ease;
+  z-index: 0;
+}
+.PollNode__optionInputVotesCount {
+  color: rgb(61, 135, 245);
+  position: absolute;
+  right: 15px;
+  font-size: 12px;
+  top: 5px;
+}
+.PollNode__optionCheckboxWrapper {
+  position: relative;
+  display: flex;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #999;
+  margin-right: 10px;
+  border-radius: 5px;
+}
+.PollNode__optionCheckboxChecked {
+  border: 1px solid rgb(61, 135, 245);
+  background-color: rgb(61, 135, 245);
+}
+.PollNode__optionCheckboxChecked:after {
+  content: "";
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 4px;
+  width: 5px;
+  left: 8px;
+  height: 9px;
+  margin: 0;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+  pointer-events: none;
+}
+.PollNode__optionCheckbox {
+  border: 0px;
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.PollNode__optionDelete {
+  position: relative;
+  display: flex;
+  width: 28px;
+  height: 28px;
+  margin-left: 6px;
+  border: 0px;
+  background-color: transparent;
+  background-position: 6px 6px;
+  background-repeat: no-repeat;
+  z-index: 0;
+  cursor: pointer;
+  border-radius: 5px;
+  opacity: 0.3;
+}
+.PollNode__optionDelete:before,
+.PollNode__optionDelete:after {
+  position: absolute;
+  display: block;
+  content: "";
+  background-color: #999;
+  width: 2px;
+  height: 15px;
+  top: 6px;
+  left: 13px;
+}
+.PollNode__optionDelete:before {
+  transform: rotate(-45deg);
+}
+.PollNode__optionDelete:after {
+  transform: rotate(45deg);
+}
+.PollNode__optionDelete:hover {
+  opacity: 1;
+  background-color: #eee;
+}
+.PollNode__optionDeleteDisabled {
+  cursor: not-allowed;
+}
+.PollNode__optionDeleteDisabled:hover {
+  opacity: 0.3;
+  background-color: transparent;
+}
+.PollNode__footer {
+  display: flex;
+  justify-content: center;
+}
+
+/* src/ui/Button.css */
+.Button__root {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border: 0px;
+  background-color: #eee;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.Button__root:hover {
+  background-color: #ddd;
+}
+.Button__small {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 13px;
+}
+.Button__disabled {
+  cursor: not-allowed;
+}
+.Button__disabled:hover {
+  background-color: #eee;
+}
+/*# sourceMappingURL=PollComponent-CWI5UJF5.css.map */

package/dist/PollComponent-CWI5UJF5.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/nodes/PollNode.css","../src/ui/Button.css"],"sourcesContent":["/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n *\r\n */\r\n\r\n.PollNode__container {\r\n  border: 1px solid #eee;\r\n  background-color: #fcfcfc;\r\n  border-radius: 10px;\r\n  max-width: 600px;\r\n  min-width: 400px;\r\n  cursor: pointer;\r\n  user-select: none;\r\n}\r\n.PollNode__container.focused {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n.PollNode__inner {\r\n  margin: 15px;\r\n  cursor: default;\r\n}\r\n.PollNode__heading {\r\n  margin-left: 0px;\r\n  margin-top: 0px;\r\n  margin-right: 0px;\r\n  margin-bottom: 15px;\r\n  color: #444;\r\n  text-align: center;\r\n  font-size: 18px;\r\n}\r\n.PollNode__optionContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin-bottom: 10px;\r\n  align-items: center;\r\n}\r\n.PollNode__optionInputWrapper {\r\n  display: flex;\r\n  flex: 10px;\r\n  border: 1px solid rgb(61, 135, 245);\r\n  border-radius: 5px;\r\n  position: relative;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n}\r\n.PollNode__optionInput {\r\n  display: flex;\r\n  flex: 1px;\r\n  border: 0px;\r\n  padding: 7px;\r\n  color: rgb(61, 135, 245);\r\n  background-color: transparent;\r\n  font-weight: bold;\r\n  outline: 0px;\r\n  z-index: 0;\r\n}\r\n.PollNode__optionInput::placeholder {\r\n  font-weight: normal;\r\n  color: #999;\r\n}\r\n.PollNode__optionInputVotes {\r\n  background-color: rgb(236, 243, 254);\r\n  height: 100%;\r\n  position: absolute;\r\n  top: 0px;\r\n  left: 0px;\r\n  transition: width 1s ease;\r\n  z-index: 0;\r\n}\r\n.PollNode__optionInputVotesCount {\r\n  color: rgb(61, 135, 245);\r\n  position: absolute;\r\n  right: 15px;\r\n  font-size: 12px;\r\n  top: 5px;\r\n}\r\n.PollNode__optionCheckboxWrapper {\r\n  position: relative;\r\n  display: flex;\r\n  width: 22px;\r\n  height: 22px;\r\n  border: 1px solid #999;\r\n  margin-right: 10px;\r\n  border-radius: 5px;\r\n}\r\n.PollNode__optionCheckboxChecked {\r\n  border: 1px solid rgb(61, 135, 245);\r\n  background-color: rgb(61, 135, 245);\r\n}\r\n.PollNode__optionCheckboxChecked:after {\r\n  content: '';\r\n  cursor: pointer;\r\n  border-color: #fff;\r\n  border-style: solid;\r\n  position: absolute;\r\n  display: block;\r\n  top: 4px;\r\n  width: 5px;\r\n  left: 8px;\r\n  height: 9px;\r\n  margin: 0;\r\n  transform: rotate(45deg);\r\n  border-width: 0 2px 2px 0;\r\n  pointer-events: none;\r\n}\r\n.PollNode__optionCheckbox {\r\n  border: 0px;\r\n  position: absolute;\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  opacity: 0;\r\n  cursor: pointer;\r\n}\r\n.PollNode__optionDelete {\r\n  position: relative;\r\n  display: flex;\r\n  width: 28px;\r\n  height: 28px;\r\n  margin-left: 6px;\r\n  border: 0px;\r\n  background-color: transparent;\r\n  background-position: 6px 6px;\r\n  background-repeat: no-repeat;\r\n  z-index: 0;\r\n  cursor: pointer;\r\n  border-radius: 5px;\r\n  opacity: 0.3;\r\n}\r\n.PollNode__optionDelete:before,\r\n.PollNode__optionDelete:after {\r\n  position: absolute;\r\n  display: block;\r\n  content: '';\r\n  background-color: #999;\r\n  width: 2px;\r\n  height: 15px;\r\n  top: 6px;\r\n  left: 13px;\r\n}\r\n.PollNode__optionDelete:before {\r\n  transform: rotate(-45deg);\r\n}\r\n.PollNode__optionDelete:after {\r\n  transform: rotate(45deg);\r\n}\r\n.PollNode__optionDelete:hover {\r\n  opacity: 1;\r\n  background-color: #eee;\r\n}\r\n.PollNode__optionDeleteDisabled {\r\n  cursor: not-allowed;\r\n}\r\n.PollNode__optionDeleteDisabled:hover {\r\n  opacity: 0.3;\r\n  background-color: transparent;\r\n}\r\n.PollNode__footer {\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n","/**\r\n * Copyright (c) Meta Platforms, Inc. and affiliates.\r\n *\r\n * This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n *\r\n *\r\n */\r\n\r\n.Button__root {\r\n  padding-top: 10px;\r\n  padding-bottom: 10px;\r\n  padding-left: 15px;\r\n  padding-right: 15px;\r\n  border: 0px;\r\n  background-color: #eee;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n}\r\n.Button__root:hover {\r\n  background-color: #ddd;\r\n}\r\n.Button__small {\r\n  padding-top: 5px;\r\n  padding-bottom: 5px;\r\n  padding-left: 10px;\r\n  padding-right: 10px;\r\n  font-size: 13px;\r\n}\r\n.Button__disabled {\r\n  cursor: not-allowed;\r\n}\r\n.Button__disabled:hover {\r\n  background-color: #eee;\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/PollComponent-KLJZSW5O.js

@@ -0,0 +1,199 @@
+import {
+  $isPollNode,
+  createPollOption
+} from "./chunk-35UCX4ZT.js";
+import {
+  Button,
+  joinClasses
+} from "./chunk-TVF6V3BJ.js";
+import "./chunk-PZ5AY32C.js";
+
+// src/nodes/PollComponent.tsx
+import { useCollaborationContext } from "@lexical/react/LexicalCollaborationContext";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
+import { mergeRegister } from "@lexical/utils";
+import {
+  $getNodeByKey,
+  $getSelection,
+  $isNodeSelection,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_LOW
+} from "lexical";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getTotalVotes(options) {
+  return options.reduce((totalVotes, next) => {
+    return totalVotes + next.votes.length;
+  }, 0);
+}
+function PollOptionComponent({
+  option,
+  index,
+  options,
+  totalVotes,
+  withPollNode
+}) {
+  const { name: username } = useCollaborationContext();
+  const checkboxRef = useRef(null);
+  const votesArray = option.votes;
+  const checkedIndex = votesArray.indexOf(username);
+  const checked = checkedIndex !== -1;
+  const votes = votesArray.length;
+  const text = option.text;
+  return /* @__PURE__ */ jsxs("div", { className: "PollNode__optionContainer", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: joinClasses(
+          "PollNode__optionCheckboxWrapper",
+          checked && "PollNode__optionCheckboxChecked"
+        ),
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: checkboxRef,
+            className: "PollNode__optionCheckbox",
+            type: "checkbox",
+            onChange: (e) => {
+              withPollNode((node) => {
+                node.toggleVote(option, username);
+              });
+            },
+            checked
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "PollNode__optionInputWrapper", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "PollNode__optionInputVotes",
+          style: { width: `${votes === 0 ? 0 : votes / totalVotes * 100}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "PollNode__optionInputVotesCount", children: votes > 0 && (votes === 1 ? "1 vote" : `${votes} votes`) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "PollNode__optionInput",
+          type: "text",
+          value: text,
+          onChange: (e) => {
+            const target = e.target;
+            const value = target.value;
+            const selectionStart = target.selectionStart;
+            const selectionEnd = target.selectionEnd;
+            withPollNode(
+              (node) => {
+                node.setOptionText(option, value);
+              },
+              () => {
+                target.selectionStart = selectionStart;
+                target.selectionEnd = selectionEnd;
+              }
+            );
+          },
+          placeholder: `Option ${index + 1}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled: options.length < 3,
+        className: joinClasses(
+          "PollNode__optionDelete",
+          options.length < 3 && "PollNode__optionDeleteDisabled"
+        ),
+        "aria-label": "Remove",
+        onClick: () => {
+          withPollNode((node) => {
+            node.deleteOption(option);
+          });
+        }
+      }
+    )
+  ] });
+}
+function PollComponent({
+  question,
+  options,
+  nodeKey
+}) {
+  const [editor] = useLexicalComposerContext();
+  const totalVotes = useMemo(() => getTotalVotes(options), [options]);
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const [selection, setSelection] = useState(null);
+  const ref = useRef(null);
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        setSelection(editorState.read(() => $getSelection()));
+      }),
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (payload) => {
+          const event = payload;
+          if (event.target === ref.current) {
+            if (!event.shiftKey) {
+              clearSelection();
+            }
+            setSelected(!isSelected);
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+  }, [clearSelection, editor, isSelected, nodeKey, setSelected]);
+  const withPollNode = (cb, onUpdate) => {
+    editor.update(
+      () => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isPollNode(node)) {
+          cb(node);
+        }
+      },
+      { onUpdate }
+    );
+  };
+  const addOption = () => {
+    withPollNode((node) => {
+      node.addOption(createPollOption());
+    });
+  };
+  const isFocused = $isNodeSelection(selection) && isSelected;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `PollNode__container ${isFocused ? "focused" : ""}`,
+      ref,
+      children: /* @__PURE__ */ jsxs("div", { className: "PollNode__inner", children: [
+        /* @__PURE__ */ jsx("h2", { className: "PollNode__heading", children: question }),
+        options.map((option, index) => {
+          const key = option.uid;
+          return /* @__PURE__ */ jsx(
+            PollOptionComponent,
+            {
+              withPollNode,
+              option,
+              index,
+              options,
+              totalVotes
+            },
+            key
+          );
+        }),
+        /* @__PURE__ */ jsx("div", { className: "PollNode__footer", children: /* @__PURE__ */ jsx(Button, { onClick: addOption, small: true, children: "Add Option" }) })
+      ] })
+    }
+  );
+}
+export {
+  PollComponent as default
+};
+//# sourceMappingURL=PollComponent-KLJZSW5O.js.map

package/dist/PollComponent-KLJZSW5O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/nodes/PollComponent.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type {Option, Options, PollNode} from './PollNode';\nimport type {JSX} from 'react';\n\nimport './PollNode.css';\n\nimport {useCollaborationContext} from '@lexical/react/LexicalCollaborationContext';\nimport {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';\nimport {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';\nimport {mergeRegister} from '@lexical/utils';\nimport {\n  $getNodeByKey,\n  $getSelection,\n  $isNodeSelection,\n  BaseSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n  NodeKey,\n} from 'lexical';\nimport {useEffect, useMemo, useRef, useState} from 'react';\n\nimport Button from '../ui/Button';\nimport joinClasses from '../utils/joinClasses';\nimport {$isPollNode, createPollOption} from './PollNode';\n\nfunction getTotalVotes(options: Options): number {\n  return options.reduce((totalVotes, next) => {\n    return totalVotes + next.votes.length;\n  }, 0);\n}\n\nfunction PollOptionComponent({\n  option,\n  index,\n  options,\n  totalVotes,\n  withPollNode,\n}: {\n  index: number;\n  option: Option;\n  options: Options;\n  totalVotes: number;\n  withPollNode: (\n    cb: (pollNode: PollNode) => void,\n    onSelect?: () => void,\n  ) => void;\n}): JSX.Element {\n  const {name: username} = useCollaborationContext();\n  const checkboxRef = useRef(null);\n  const votesArray = option.votes;\n  const checkedIndex = votesArray.indexOf(username);\n  const checked = checkedIndex !== -1;\n  const votes = votesArray.length;\n  const text = option.text;\n\n  return (\n    <div className=\"PollNode__optionContainer\">\n      <div\n        className={joinClasses(\n          'PollNode__optionCheckboxWrapper',\n          checked && 'PollNode__optionCheckboxChecked',\n        )}>\n        <input\n          ref={checkboxRef}\n          className=\"PollNode__optionCheckbox\"\n          type=\"checkbox\"\n          onChange={(e) => {\n            withPollNode((node) => {\n              node.toggleVote(option, username);\n            });\n          }}\n          checked={checked}\n        />\n      </div>\n      <div className=\"PollNode__optionInputWrapper\">\n        <div\n          className=\"PollNode__optionInputVotes\"\n          style={{width: `${votes === 0 ? 0 : (votes / totalVotes) * 100}%`}}\n        />\n        <span className=\"PollNode__optionInputVotesCount\">\n          {votes > 0 && (votes === 1 ? '1 vote' : `${votes} votes`)}\n        </span>\n        <input\n          className=\"PollNode__optionInput\"\n          type=\"text\"\n          value={text}\n          onChange={(e) => {\n            const target = e.target;\n            const value = target.value;\n            const selectionStart = target.selectionStart;\n            const selectionEnd = target.selectionEnd;\n            withPollNode(\n              (node) => {\n                node.setOptionText(option, value);\n              },\n              () => {\n                target.selectionStart = selectionStart;\n                target.selectionEnd = selectionEnd;\n              },\n            );\n          }}\n          placeholder={`Option ${index + 1}`}\n        />\n      </div>\n      <button type=\"button\"\n        disabled={options.length < 3}\n        className={joinClasses(\n          'PollNode__optionDelete',\n          options.length < 3 && 'PollNode__optionDeleteDisabled',\n        )}\n        aria-label=\"Remove\"\n        onClick={() => {\n          withPollNode((node) => {\n            node.deleteOption(option);\n          });\n        }}\n      />\n    </div>\n  );\n}\n\nexport default function PollComponent({\n  question,\n  options,\n  nodeKey,\n}: {\n  nodeKey: NodeKey;\n  options: Options;\n  question: string;\n}): JSX.Element {\n  const [editor] = useLexicalComposerContext();\n  const totalVotes = useMemo(() => getTotalVotes(options), [options]);\n  const [isSelected, setSelected, clearSelection] =\n    useLexicalNodeSelection(nodeKey);\n  const [selection, setSelection] = useState<BaseSelection | null>(null);\n  const ref = useRef(null);\n\n  useEffect(() => {\n    return mergeRegister(\n      editor.registerUpdateListener(({editorState}) => {\n        setSelection(editorState.read(() => $getSelection()));\n      }),\n      editor.registerCommand<MouseEvent>(\n        CLICK_COMMAND,\n        (payload) => {\n          const event = payload;\n\n          if (event.target === ref.current) {\n            if (!event.shiftKey) {\n              clearSelection();\n            }\n            setSelected(!isSelected);\n            return true;\n          }\n\n          return false;\n        },\n        COMMAND_PRIORITY_LOW,\n      ),\n    );\n  }, [clearSelection, editor, isSelected, nodeKey, setSelected]);\n\n  const withPollNode = (\n    cb: (node: PollNode) => void,\n    onUpdate?: () => void,\n  ): void => {\n    editor.update(\n      () => {\n        const node = $getNodeByKey(nodeKey);\n        if ($isPollNode(node)) {\n          cb(node);\n        }\n      },\n      {onUpdate},\n    );\n  };\n\n  const addOption = () => {\n    withPollNode((node) => {\n      node.addOption(createPollOption());\n    });\n  };\n\n  const isFocused = $isNodeSelection(selection) && isSelected;\n\n  return (\n    <div\n      className={`PollNode__container ${isFocused ? 'focused' : ''}`}\n      ref={ref}>\n      <div className=\"PollNode__inner\">\n        <h2 className=\"PollNode__heading\">{question}</h2>\n        {options.map((option, index) => {\n          const key = option.uid;\n          return (\n            <PollOptionComponent\n              key={key}\n              withPollNode={withPollNode}\n              option={option}\n              index={index}\n              options={options}\n              totalVotes={totalVotes}\n            />\n          );\n        })}\n        <div className=\"PollNode__footer\">\n          <Button onClick={addOption} small={true}>\n            Add Option\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}