From a1669ff9fccb58e4a0e82e19ed2948bc68abb6b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A2=96=E9=80=B8?=
 <49649786+Zuoqiu-Yingyi@users.noreply.github.com>
Date: Tue, 18 Jul 2023 09:51:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E4=BC=98=E5=8C=96=20Bl?=
 =?UTF-8?q?ockIcon=20=E7=BB=84=E4=BB=B6=20|=20Optimize=20BlockIcon=20compo?=
 =?UTF-8?q?nent.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dock.svelte | 16 +++++++-----
 src/components/Tab.svelte  | 50 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Tab.svelte

diff --git a/src/components/Dock.svelte b/src/components/Dock.svelte
index 4040b75..49cacf5 100644
--- a/src/components/Dock.svelte
+++ b/src/components/Dock.svelte
@@ -17,6 +17,7 @@
 
 <script lang="ts">
     import type { ComponentEvents } from "svelte";
+    import { get } from "svelte/store";
     import Bar from "@workspace/components/siyuan/dock/Bar.svelte";
 
     import EditorIframe from "./EditorIframe.svelte";
@@ -47,10 +48,11 @@
                 type: "refresh",
                 active: realTime,
                 ariaLabel: plugin.i18n.dock.refresh.ariaLabel,
-                onClick: (_e, _element, active) => {
+                onClick: (_e, _element, props) => {
+                    let active = get(props.active);
                     active = !active;
                     realTime = active;
-                    return active;
+                    props.active.set(active);
                 },
             },
             {
@@ -59,14 +61,15 @@
                 type: "inline",
                 active: inline === Inline.span,
                 ariaLabel: plugin.i18n.dock.inline.ariaLabel,
-                onClick: (_e, _element, active) => {
+                onClick: (_e, _element, props) => {
+                    let active = get(props.active);
                     active = !active;
                     if (active) {
                         inline = Inline.span;
                     } else {
                         inline = Inline.mark;
                     }
-                    return active;
+                    props.active.set(active);
                 },
             },
             {
@@ -75,14 +78,15 @@
                 type: "kramdown",
                 active: language === Language.kramdown,
                 ariaLabel: plugin.i18n.dock.kramdown.ariaLabel,
-                onClick: (_e, _element, active) => {
+                onClick: (_e, _element, props) => {
+                    let active = get(props.active);
                     active = !active;
                     if (active) {
                         language = Language.kramdown;
                     } else {
                         language = Language.markdown;
                     }
-                    return active;
+                    props.active.set(active);
                 },
             },
             {
diff --git a/src/components/Tab.svelte b/src/components/Tab.svelte
new file mode 100644
index 0000000..a9b7a14
--- /dev/null
+++ b/src/components/Tab.svelte
@@ -0,0 +1,50 @@
+<!--
+ Copyright (C) 2023 Zuoqiu Yingyi
+ 
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as
+ published by the Free Software Foundation, either version 3 of the
+ License, or (at your option) any later version.
+ 
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+ 
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script lang="ts">
+    import Tab from "@workspace/components/siyuan/tab/Tab.svelte";
+    import EditorIframe from "./EditorIframe.svelte";
+
+    export let plugin: EditorIframe["plugin"];
+    export let savable: EditorIframe["savable"];
+    export let changable: EditorIframe["changable"];
+    export let modified: EditorIframe["modified"];
+    export let options: EditorIframe["options"];
+
+    let fullscreen: Tab["fullscreen"] = false; // 是否为全屏模式
+    let breadcrumbItems: Tab["breadcrumbItems"] = []; // 面包屑项
+    let breadcrumbIcons: Tab["breadcrumbIcons"] = []; // 面包屑按钮
+</script>
+
+<Tab
+    {fullscreen}
+    {breadcrumbItems}
+    {breadcrumbIcons}
+>
+    <div
+        slot="content"
+        class="fn__flex fn__flex-1"
+    >
+        <EditorIframe
+            {plugin}
+            {savable}
+            {changable}
+            {modified}
+            {options}
+        />
+    </div>
+</Tab>