Merge pull request #50 from DiggesT/fix/css-namespace

CSS namespaces
ozanyurtsever · Oct 2, 2023 · 391ed49 · 391ed49
2 parents f8780f2 + fd8ff2c
commit 391ed49
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/src/EditorComposer.css b/src/EditorComposer.css
@@ -8,6 +8,8 @@
 
 @import 'https://fonts.googleapis.com/css?family=Reenie+Beanie';
 
+@namespace "Verbum-EditorComposer";
+
 .editor-shell {
   margin: 20px auto;
   border-radius: 2px;

diff --git a/src/EditorComposer.tsx b/src/EditorComposer.tsx
@@ -27,7 +27,9 @@ const EditorComposer = ({ children, initialEditorState }: IEditorComposer) => {
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <I18nextProvider i18n={i18n}>
-        <div className="editor-shell">{children}</div>
+        <svg xmlns="Verbum-EditorComposer">
+          <div className="editor-shell">{children}</div>
+        </svg>
       </I18nextProvider>
     </LexicalComposer>
   );

diff --git a/src/plugins/ToolbarPlugin/ToolbarPlugin.css b/src/plugins/ToolbarPlugin/ToolbarPlugin.css
@@ -6,6 +6,8 @@
  *
  *
  */
+@namespace 'Verbum-toolbar';
+
 .ToolbarPlugin__dialogActions {
   display: flex;
   flex-direction: row;

diff --git a/src/plugins/ToolbarPlugin/ToolbarPlugin.tsx b/src/plugins/ToolbarPlugin/ToolbarPlugin.tsx
@@ -265,26 +265,29 @@ const ToolbarPlugin = ({
         blockType,
       }}
     >
-      <div className="toolbar">
-        <UndoButton />
-        <RedoButton />
-        <Divider />
-        {supportedBlockTypes.has(blockType) && activeEditor === initialEditor && (
-          <>
-            <BlockFormatDropdown />
-            <Divider />
-          </>
-        )}
-        {blockType === 'code' ? (
-          <>
-            <CodeLanguageDropdown />
-            <Divider />
-            {alignExists && AlignComponent}
-          </>
-        ) : (
-          <>{children}</>
-        )}
-      </div>
+      <svg xmlns="Verbum-toolbar">
+        <div className="toolbar">
+          <UndoButton />
+          <RedoButton />
+          <Divider />
+          {supportedBlockTypes.has(blockType) &&
+            activeEditor === initialEditor && (
+              <>
+                <BlockFormatDropdown />
+                <Divider />
+              </>
+            )}
+          {blockType === 'code' ? (
+            <>
+              <CodeLanguageDropdown />
+              <Divider />
+              {alignExists && AlignComponent}
+            </>
+          ) : (
+            <>{children}</>
+          )}
+        </div>
+      </svg>
     </ToolbarContext.Provider>
   );
 };