Fix Poll Node (#5579)

facebook · Feb 4, 2024 · f9f1184 · f9f1184
1 parent 9df9883
commit f9f1184
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 53 deletions.
diff --git a/packages/lexical-playground/src/nodes/InlineImageNode.css b/packages/lexical-playground/src/nodes/InlineImageNode.css
@@ -39,3 +39,56 @@
   display: inline-block;
   pointer-events: none;
 }
+
+.InlineImageNode_Checkbox:checked,
+.InlineImageNode_Checkbox:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+.InlineImageNode_Checkbox:checked + label,
+.InlineImageNode_Checkbox:not(:checked) + label {
+  position: absolute;
+  padding-right: 55px;
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+  color: #666;
+}
+
+.InlineImageNode_Checkbox:checked + label:before,
+.InlineImageNode_Checkbox:not(:checked) + label:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #666;
+  background: #fff;
+}
+
+.InlineImageNode_Checkbox:checked + label:after,
+.InlineImageNode_Checkbox:not(:checked) + label:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: #222222;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+.InlineImageNode_Checkbox:not(:checked) + label:after {
+  opacity: 0;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+}
+
+.InlineImageNode_Checkbox:checked + label:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
diff --git a/packages/lexical-playground/src/plugins/InlineImagePlugin/index.tsx b/packages/lexical-playground/src/plugins/InlineImagePlugin/index.tsx
@@ -7,7 +7,7 @@
  */
 import type {Position} from '../../nodes/InlineImageNode';
 
-import '../../ui/Checkbox.css';
+import '../../nodes/InlineImageNode.css';
 
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {$wrapNodeInElement, mergeRegister} from '@lexical/utils';
@@ -141,6 +141,7 @@ export function InsertInlineImageDialog({
       <div className="Input__wrapper">
         <input
           id="caption"
+          className="InlineImageNode_Checkbox"
           type="checkbox"
           checked={showCaption}
           onChange={handleShowCaptionChange}

diff --git a/packages/lexical-playground/src/ui/Checkbox.css b/packages/lexical-playground/src/ui/Checkbox.css