feat: import and export suika format file

packages/components/src/components/dropdown/dropdown-item/dropdown-item.scss

@@ -3,7 +3,8 @@
   justify-content: space-between;
   align-items: center;
 
-  padding: 0 16px 0 8px;
+  padding-left: 4px;
+  padding-right: 16px;
   height: 24px;
   line-height: 24px;
   font-size: 12px;

packages/components/src/components/dropdown/dropdown.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import React, { FC, useState } from 'react';
 import { Popover } from '../popover';
 import { DropdownItem } from './dropdown-item';
 import './dropdown.scss';
@@ -32,37 +32,35 @@ export const Dropdown: FC<IProps> = (props) => {
   const [open, setOpen] = useState(false);
 
   return (
-    <div className="sk-dropdown">
-      <Popover
-        open={open}
-        onOpenChange={(val) => {
-          setOpen(val);
-        }}
-        content={
-          <div className="sk-dropdown-content">
-            {items.map((item, index) => {
-              return isDivider(item) ? (
-                <div key={index} className="sk-dropdown-item-separator" />
-              ) : (
-                <DropdownItem
-                  key={item.key}
-                  suffix={item.suffix}
-                  check={item.check}
-                  onClick={() => {
-                    setOpen(false);
-                    props.onClick?.({ key: item.key });
-                  }}
-                >
-                  {item.label}
-                </DropdownItem>
-              );
-            })}
-          </div>
-        }
-        placement="bottom-start"
-      >
-        <span>{children}</span>
-      </Popover>
-    </div>
+    <Popover
+      open={open}
+      onOpenChange={(val) => {
+        setOpen(val);
+      }}
+      content={
+        <div className="sk-dropdown-content">
+          {items.map((item, index) => {
+            return isDivider(item) ? (
+              <div key={index} className="sk-dropdown-item-separator" />
+            ) : (
+              <DropdownItem
+                key={item.key}
+                suffix={item.suffix}
+                check={item.check}
+                onClick={() => {
+                  setOpen(false);
+                  props.onClick?.({ key: item.key });
+                }}
+              >
+                {item.label}
+              </DropdownItem>
+            );
+          })}
+        </div>
+      }
+      placement="bottom-start"
+    >
+      {React.cloneElement(children as React.ReactElement)}
+    </Popover>
   );
 };

packages/components/src/components/dropdown/index.ts

@@ -0,0 +1 @@
+export * from './dropdown';

packages/components/src/components/popover/popover.tsx

@@ -58,10 +58,10 @@ export const Popover: FC<PopoverProps> = (props) => {
 
   return (
     <>
-      {/* TODO: remove span container el */}
-      <span ref={refs.setReference} {...getReferenceProps()}>
-        {children}
-      </span>
+      {React.cloneElement(children as React.ReactElement, {
+        ...getReferenceProps(),
+        ref: refs.setReference,
+      })}
       <FloatingPortal>
         {mixedOpen && (
           <div

packages/components/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components/select';
 export * from './components/popover';
 export * from './components/icon-button';
+export * from './components/dropdown';

packages/icons/src/icons/tool/index.ts

@@ -4,3 +4,4 @@ export * from './select-outlined';
 export * from './hand-outlined';
 export * from './text-filled';
 export * from './line-outlined';
+export * from './menu-outlined';

packages/icons/src/icons/tool/menu-outlined.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const MenuOutlined = React.memo(() => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fillRule="evenodd" clipRule="evenodd" d="M17 12H6V11H17V12Z" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M17 16H6V15H17V16Z" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M17 8H6V7H17V8Z" />
+    </svg>
+  );
+});

packages/suika/src/components/Cards/AlignCard/AlignCard.tsx

@@ -13,7 +13,7 @@ import {
   AlignVCenter,
   IconAlignBottom,
 } from '@suika/icons';
-import { alignAndRecord } from '../../../editor/service';
+import { alignAndRecord } from '../../../editor';
 
 export const AlignCard: FC = () => {
   const editor = useContext(EditorContext);

packages/suika/src/components/Cards/TextureCard/TextureCard.tsx

@@ -98,87 +98,89 @@ export const TextureCard: FC<IProps> = ({
       placement="left-start"
       offset={2}
     >
-      <BaseCard
-        title={title}
-        headerAction={
-          <IconButton onClick={onAdd}>
-            <AddOutlined />
-          </IconButton>
-        }
-      >
-        {arrMapRevert(textures, (texture, index) => {
-          /** SOLID **/
-          if (texture.type === TextureType.Solid) {
-            return (
-              <div className="fill-item" key={index}>
-                <ColorHexInput
-                  prefix={
-                    <div
-                      className="color-block"
-                      style={{
-                        backgroundColor: parseRGBAStr(texture.attrs),
-                        boxShadow: isNearWhite(texture.attrs)
-                          ? '0 0 0 1px rgba(0,0,0,0.1) inset'
-                          : undefined,
-                      }}
-                      onMouseDown={() => {
-                        setActiveIndex(index);
-                      }}
-                    />
-                  }
-                  value={parseRGBToHex(texture.attrs)}
-                  onBlur={(newHex) => {
-                    const rgb = parseHexToRGB(newHex);
-
-                    if (rgb) {
-                      const newSolidTexture: TextureSolid = {
-                        type: TextureType.Solid,
-                        attrs: {
-                          ...rgb,
-                          a: texture.attrs.a,
-                        },
-                      };
-                      onChangeComplete(newSolidTexture, index);
-                    }
-                  }}
-                />
-                <IconButton onClick={() => onDelete(index)}>
-                  <RemoveOutlined />
-                </IconButton>
-              </div>
-            );
+      <div>
+        <BaseCard
+          title={title}
+          headerAction={
+            <IconButton onClick={onAdd}>
+              <AddOutlined />
+            </IconButton>
           }
+        >
+          {arrMapRevert(textures, (texture, index) => {
+            /** SOLID **/
+            if (texture.type === TextureType.Solid) {
+              return (
+                <div className="fill-item" key={index}>
+                  <ColorHexInput
+                    prefix={
+                      <div
+                        className="color-block"
+                        style={{
+                          backgroundColor: parseRGBAStr(texture.attrs),
+                          boxShadow: isNearWhite(texture.attrs)
+                            ? '0 0 0 1px rgba(0,0,0,0.1) inset'
+                            : undefined,
+                        }}
+                        onMouseDown={() => {
+                          setActiveIndex(index);
+                        }}
+                      />
+                    }
+                    value={parseRGBToHex(texture.attrs)}
+                    onBlur={(newHex) => {
+                      const rgb = parseHexToRGB(newHex);
 
-          /** IMAGE */
-          if (texture.type === TextureType.Image) {
-            return (
-              <div className="fill-item" key={index}>
-                <div
-                  className="img-block"
-                  onClick={() => {
-                    setActiveIndex(index);
-                  }}
-                >
-                  <img
-                    style={{
-                      backgroundImage: `url(${texture.attrs.src})`,
-                      objectFit: 'contain',
-                      width: '100%',
-                      height: '100%',
+                      if (rgb) {
+                        const newSolidTexture: TextureSolid = {
+                          type: TextureType.Solid,
+                          attrs: {
+                            ...rgb,
+                            a: texture.attrs.a,
+                          },
+                        };
+                        onChangeComplete(newSolidTexture, index);
+                      }
                     }}
-                    alt="img"
-                    src={texture.attrs.src || DEFAULT_IMAGE_SRC}
                   />
+                  <IconButton onClick={() => onDelete(index)}>
+                    <RemoveOutlined />
+                  </IconButton>
                 </div>
-                <IconButton onClick={() => onDelete(index)}>
-                  <RemoveOutlined />
-                </IconButton>
-              </div>
-            );
-          }
-        })}
-        {appendedContent}
-      </BaseCard>
+              );
+            }
+
+            /** IMAGE */
+            if (texture.type === TextureType.Image) {
+              return (
+                <div className="fill-item" key={index}>
+                  <div
+                    className="img-block"
+                    onClick={() => {
+                      setActiveIndex(index);
+                    }}
+                  >
+                    <img
+                      style={{
+                        backgroundImage: `url(${texture.attrs.src})`,
+                        objectFit: 'contain',
+                        width: '100%',
+                        height: '100%',
+                      }}
+                      alt="img"
+                      src={texture.attrs.src || DEFAULT_IMAGE_SRC}
+                    />
+                  </div>
+                  <IconButton onClick={() => onDelete(index)}>
+                    <RemoveOutlined />
+                  </IconButton>
+                </div>
+              );
+            }
+          })}
+          {appendedContent}
+        </BaseCard>
+      </div>
     </Popover>
   );
 };

packages/suika/src/components/Header/components/Toolbar/Toolbar.scss

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
 
-    margin-left: 24px;
+    margin-left: 8px;
     height: 48px;
   }
-}
+}

packages/suika/src/components/Header/components/Toolbar/Toolbar.tsx

@@ -12,6 +12,7 @@ import {
   SelectOutlined,
   TextFilled,
 } from '@suika/icons';
+import { Menu } from './menu';
 
 export const ToolBar = () => {
   const editor = useContext(EditorContext);
@@ -29,6 +30,7 @@ export const ToolBar = () => {
 
   return (
     <div className="suika-tool-bar">
+      <Menu />
       {(
         [
           {

packages/suika/src/components/Header/components/Toolbar/menu/Menu.tsx

@@ -0,0 +1,40 @@
+import { Dropdown } from '@suika/components';
+import { FC, useContext } from 'react';
+import { useIntl } from 'react-intl';
+import { exportService, importService } from '../../../../../editor';
+import { EditorContext } from '../../../../../context';
+import { MenuOutlined } from '@suika/icons';
+import './menu.scss';
+
+export const Menu: FC = () => {
+  const intl = useIntl();
+  const editor = useContext(EditorContext);
+
+  const items = [
+    {
+      key: 'import',
+      label: intl.formatMessage({ id: 'import.originFile' }),
+    },
+    {
+      key: 'export',
+      label: intl.formatMessage({ id: 'export.originFile' }),
+    },
+  ];
+
+  const handleClick = ({ key }: { key: string }) => {
+    if (!editor) return;
+    if (key === 'import') {
+      importService.importOriginFile(editor);
+    } else if (key === 'export') {
+      exportService.exportOriginFile(editor);
+    }
+  };
+
+  return (
+    <Dropdown items={items} onClick={handleClick}>
+      <div className="sk-ed-menu-btn">
+        <MenuOutlined />
+      </div>
+    </Dropdown>
+  );
+};

packages/suika/src/components/Header/components/Toolbar/menu/index.ts

@@ -0,0 +1 @@
+export * from './Menu';

packages/suika/src/components/Header/components/Toolbar/menu/menu.scss

@@ -0,0 +1,13 @@
+.sk-ed-menu-btn {
+  margin-right: 8px;
+  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    background-color: #eee;
+  }
+}

packages/suika/src/components/ZoomActions/ZoomActions.scss

@@ -27,7 +27,6 @@
       right: 6px;
 
       padding: 8px 0;
-      border: 1px solid #eee;
       border-radius: 4px;
       width: 200px;
       background-color: #fff;