Skip to content

Commit 6fba62a

Browse files
aolyangaolyang
committed
update: toolbars
1 parent 9f61ae5 commit 6fba62a

File tree

10 files changed

+67
-5
lines changed

10 files changed

+67
-5
lines changed

‎docs/src/components/editor-toolbars/Blockquote.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import IconBar from "@/components/IconBar"
2+
import { ediBlockquote } from "@tiptiz/editor-icons"
3+
4+
export default function Blockquote() {
5+
return <IconBar path={ediBlockquote} tooltip="Blockquote" />
6+
}

‎docs/src/components/editor-toolbars/CodeBlock.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import IconBar from "@/components/IconBar"
2+
import { ediCodeBlock } from "@tiptiz/editor-icons"
3+
4+
export default function CodeBlock() {
5+
return <IconBar path={ediCodeBlock} tooltip="Code Block" />
6+
}

‎docs/src/components/editor-toolbars/Emoji.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import IconBar from "@/components/IconBar"
2+
import { ediEmoji } from "@tiptiz/editor-icons"
3+
4+
export default function Emoji() {
5+
return <IconBar path={ediEmoji} tooltip="Emoji" />
6+
}

‎docs/src/components/editor-toolbars/InsertImage.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import IconBar from "@/components/IconBar"
2+
import { ediImage } from "@tiptiz/editor-icons"
3+
4+
export default function InsertImage() {
5+
return <IconBar path={ediImage} tooltip="Image" />
6+
}

‎docs/src/components/editor-toolbars/LiftList.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import IconBar from "@/components/IconBar"
2+
import { ediLiftList } from "@tiptiz/editor-icons"
3+
4+
export default function LiftList() {
5+
return <IconBar path={ediLiftList} tooltip="Lift List" />
6+
}

‎docs/src/components/editor-toolbars/PageBreak.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import IconBar from "@/components/IconBar"
2+
import { ediPageBreak } from "@tiptiz/editor-icons"
3+
4+
export default function PageBreak() {
5+
return <IconBar path={ediPageBreak} tooltip="Page Break" />
6+
}

‎docs/src/components/editor-toolbars/SinkList.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import IconBar from "@/components/IconBar"
2+
import { ediSinkList } from "@tiptiz/editor-icons"
3+
4+
export default function SinkList() {
5+
return <IconBar path={ediSinkList} tooltip="Sink List" />
6+
}

‎docs/src/components/page-index/ToolbarAllIcons.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
import { ediTableNew, ediTableRefresh, ediTableRemove } from "@tiptiz/editor-icons"
2323
import { ediTableColumnRemove, ediTableMergeCell, ediTableRowRemove, ediTableSplitCell } from "@tiptiz/editor-icons"
2424
import { ediToggleTableCell, ediToggleTableHeaderLeft, ediToggleTableHeaderTop } from "@tiptiz/editor-icons"
25+
import { ediPageBreak } from "@tiptiz/editor-icons"
2526
import { useEffect, useState } from "react"
2627

2728
const SparkLines = ({ visible }: { visible: boolean }) => visible
@@ -75,6 +76,7 @@ const allIcons = [
7576
["ediEmoji", ediEmoji],
7677
["ediCodeBlock", ediCodeBlock],
7778
["ediImage", ediImage],
79+
["ediPageBreak", ediPageBreak],
7880
["ediTableNew", ediTableNew],
7981
["ediTableRefresh", ediTableRefresh],
8082
["ediTableRemove", ediTableRemove],

‎docs/src/components/page-index/ToolbarRich.tsx

+19-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
"use client"
22
import "@/styles/toolbars.css"
33

4-
import CheckList from "@/components/editor-toolbars/CheckList"
4+
import PageBreak from "@/components/editor-toolbars/PageBreak"
55
import Hr from "@/components/Hr"
66
import cn from "clsx"
77

8+
import Blockquote from "../editor-toolbars/Blockquote"
89
import BulletList from "../editor-toolbars/BulletList"
10+
import CheckList from "../editor-toolbars/CheckList"
11+
import CodeBlock from "../editor-toolbars/CodeBlock"
912
import ColorFill from "../editor-toolbars/ColorFill"
1013
import ColorText from "../editor-toolbars/ColorText"
14+
import Emoji from "../editor-toolbars/Emoji"
1115
import FontBold from "../editor-toolbars/FontBold"
1216
import FontFamily from "../editor-toolbars/FontFamily"
1317
import FontItalic from "../editor-toolbars/FontItalic"
@@ -21,9 +25,12 @@ import FontUnderline from "../editor-toolbars/FontUnderline"
2125
import FormatBrush from "../editor-toolbars/FormatBrush"
2226
import FormatClear from "../editor-toolbars/FormatClear"
2327
import HeadingLevel from "../editor-toolbars/HeadingLevel"
28+
import InsertImage from "../editor-toolbars/InsertImage"
29+
import LiftList from "../editor-toolbars/LiftList"
2430
import LineHeight from "../editor-toolbars/LineHeight"
2531
import Margin from "../editor-toolbars/Margin"
2632
import Redo from "../editor-toolbars/Redo"
33+
import SinkList from "../editor-toolbars/SinkList"
2734
import TextAlignCenter from "../editor-toolbars/TextAlignCenter"
2835
import TextAlignJustify from "../editor-toolbars/TextAlignJustify"
2936
import TextAlignLeft from "../editor-toolbars/TextAlignLeft"
@@ -37,7 +44,7 @@ const Splitter = <Hr className="h-[80%] mx-2" />
3744
export default function ToolbarRich() {
3845
return (
3946
<>
40-
<h1 className="text-[3rem] font-bold">With Rich Toolbars</h1>
47+
{/* <h1 className="text-[3rem] font-bold">With Rich Toolbars</h1> */}
4148
<div
4249
className={cn(
4350
"h-[62px] flex items-center justify-center relative",
@@ -77,10 +84,19 @@ export default function ToolbarRich() {
7784
<TextIndentDec />
7885
</div>
7986
{Splitter}
80-
<div>
87+
<div className="w-[140px] flex flex-wrap">
8188
<BulletList />
89+
<div className="mr-1"></div>
8290
<CheckList />
91+
<LiftList />
92+
<SinkList />
93+
<Blockquote />
94+
<CodeBlock />
95+
<Emoji />
96+
<InsertImage />
97+
<PageBreak />
8398
</div>
99+
{Splitter}
84100
</div>
85101
<div className="h-[62px]" />
86102
</>

‎packages/tiptiz-editor-icons/src/index.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ export const ediMargin = "M5.38 5.38L3.5 5.38L3.5 3.5L5.38 3.5L5.38 5.38ZM9.16 5
3737

3838
export const ediBulletList = "M7.34 4L3.44 4L3.44 7.88L7.34 7.88L7.34 4ZM9.29 7.39L9.29 4.48L21 4.48L21 7.39L9.29 7.39ZM7.83 13.7L5.39 9.34L2.95 13.7L7.83 13.7ZM21 13.22L9.29 13.22L9.29 10.31L21 10.31L21 13.22ZM3.67 19.28C2.72 18.33 2.72 16.8 3.67 15.85C4.62 14.9 6.16 14.9 7.11 15.85C8.07 16.8 8.07 18.33 7.11 19.28C6.16 20.23 4.62 20.23 3.67 19.28ZM6.42 16.54C5.85 15.97 4.93 15.97 4.36 16.54C3.79 17.11 3.79 18.03 4.36 18.59C4.93 19.16 5.85 19.16 6.42 18.59C6.99 18.03 6.99 17.11 6.42 16.54ZM21 18.96L9.29 18.96L9.29 16.22L21 16.22L21 18.96Z"
3939
export const ediCheckList = "M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1m1 2v14h14V5zm6.003 11L6.76 11.757l1.414-1.414l2.829 2.829l5.657-5.657l1.414 1.414z"
40-
export const ediSinkList = "M3 4L6.9 4L6.9 7.88L3 7.88L3 4ZM8.85 4.48L8.85 7.39L20.55 7.39L20.55 4.48L8.85 4.48ZM1.5 9.34L1.5 18L5.55 13.55L1.5 9.34ZM9.85 9.34L12.29 13.7L7.41 13.7L9.85 9.34ZM13.75 13.22L20.55 13.22L20.55 10.31L13.75 10.31L13.75 13.22ZM8.13 19.28C7.17 18.33 7.17 16.8 8.13 15.85C9.08 14.9 10.62 14.9 11.57 15.85C12.52 16.8 12.52 18.33 11.57 19.28C10.62 20.23 9.08 20.23 8.13 19.28ZM10.88 16.54C10.31 15.97 9.39 15.97 8.82 16.54C8.25 17.11 8.25 18.03 8.82 18.59C9.39 19.16 10.31 19.16 10.88 18.59C11.45 18.03 11.45 17.11 10.88 16.54ZM13.75 18.96L20.55 18.96L20.55 16.22L13.75 16.22L13.75 18.96Z"
41-
export const ediLiftList = "M3 4L6.9 4L6.9 7.88L3 7.88L3 4ZM8.85 4.48L8.85 7.39L20.55 7.39L20.55 4.48L8.85 4.48ZM1 13.5L5 18L5 9L1 13.5ZM9.85 9.34L12.29 13.7L7.41 13.7L9.85 9.34ZM13.75 13.22L20.55 13.22L20.55 10.31L13.75 10.31L13.75 13.22ZM8.12 19.28C7.17 18.33 7.17 16.8 8.12 15.85C9.08 14.9 10.62 14.9 11.57 15.85C12.52 16.8 12.52 18.33 11.57 19.28C10.62 20.23 9.08 20.23 8.12 19.28ZM10.88 16.54C10.31 15.97 9.39 15.97 8.82 16.54C8.25 17.11 8.25 18.03 8.82 18.59C9.39 19.16 10.31 19.16 10.88 18.59C11.45 18.03 11.45 17.11 10.88 16.54ZM13.75 18.96L20.55 18.96L20.55 16.22L13.75 16.22L13.75 18.96Z"
40+
export const ediSinkList = "M6.9 4L3 4L3 7.97L6.9 7.97L6.9 4ZM8.85 7.47L8.85 4.49L20.55 4.49L20.55 7.47L8.85 7.47ZM1.5 18.32L1.5 9.46L5.55 13.77L1.5 18.32ZM8.09 9.54L12 9.54L12 13.42L8.09 13.42L8.09 9.54ZM20.55 13.1L13.75 13.1L13.75 10.12L20.55 10.12L20.55 13.1ZM11.99 16.11L8.09 16.11L8.09 20L11.99 20L11.99 16.11ZM20.55 19.31L13.75 19.31L13.75 16.5L20.55 16.5L20.55 19.31Z"
41+
export const ediLiftList = "M6.9 4L3 4L3 7.97L6.9 7.97L6.9 4ZM8.85 7.47L8.85 4.49L20.55 4.49L20.55 7.47L8.85 7.47ZM5.55 18L5.55 9.14L1.5 14L5.55 18ZM8.09 9.54L12 9.54L12 13.42L8.09 13.42L8.09 9.54ZM20.55 13.1L13.75 13.1L13.75 10.12L20.55 10.12L20.55 13.1ZM11.99 16.11L8.09 16.11L8.09 20L11.99 20L11.99 16.11ZM20.55 19.31L13.75 19.31L13.75 16.5L20.55 16.5L20.55 19.31Z"
4242
export const ediHorizontalRule = "M21.55 11.92C21.55 11.29 21.18 10.91 20.55 10.91L3.45 10.91C2.81 10.91 2.56 11.29 2.56 11.92C2.56 12.55 2.81 12.94 3.45 12.94L20.55 12.94C21.18 12.94 21.55 12.55 21.55 11.92ZM19.6 6.33L19.61 9.54L17.71 9.54L17.71 6.71C17.71 6.08 17.39 5.76 16.76 5.76L7.26 5.76C6.63 5.76 6.31 6.08 6.31 6.71L6.31 9.54L4.41 9.54L4.4 6.33C4.4 5.55 4.67 4.88 5.23 4.32C5.79 3.77 6.46 3.5 7.25 3.5L16.75 3.5C17.53 3.5 18.2 3.77 18.76 4.32C19.32 4.88 19.6 5.55 19.6 6.33ZM6.37 17.33L6.37 14.5L4.47 14.5L4.4 17.66C4.4 18.44 4.67 19.11 5.23 19.67C5.79 20.22 6.46 20.5 7.25 20.5L16.75 20.5C17.53 20.5 18.2 20.22 18.76 19.67C19.32 19.11 19.6 18.44 19.6 17.66L19.67 14.5L17.77 14.5L17.77 17.33C17.77 17.96 17.45 18.28 16.82 18.28L7.32 18.28C6.69 18.28 6.37 17.96 6.37 17.33Z"
4343
export const ediBlockquote = "M5.2 12.01C5.82 11.64 6.5 11.45 7.22 11.45C7.77 11.42 8.33 11.51 8.85 11.71C9.37 11.92 9.83 12.22 10.23 12.62C10.64 13.03 10.95 13.5 11.17 14.03Q11.31 14.4 11.4 14.77Q11.5 15.23 11.5 15.72C11.5 16.3 11.39 16.87 11.17 17.4C10.95 17.94 10.64 18.41 10.23 18.82C9.83 19.22 9.37 19.52 8.85 19.73C8.33 19.93 7.79 20.02 7.24 19.99C6.6 19.98 6 19.84 5.44 19.55C4.55 19.14 3.84 18.52 3.31 17.67C2.77 16.83 2.5 15.89 2.5 14.88C2.5 12.06 4.2 7.53 8.03 4.25C8.26 4.05 8.51 3.97 8.8 4C9.09 4.03 9.33 4.16 9.52 4.4C9.7 4.64 9.78 4.91 9.75 5.21C9.72 5.52 9.6 5.77 9.37 5.96C7.47 7.59 6.08 9.61 5.2 12.01ZM15.7 12.04C16.33 11.67 17.01 11.48 17.73 11.48C18.28 11.45 18.82 11.52 19.34 11.72C19.87 11.93 20.33 12.23 20.73 12.63C21.14 13.04 21.45 13.51 21.67 14.04C21.89 14.58 22 15.14 22 15.72C22 16.31 21.89 16.87 21.67 17.41C21.45 17.94 21.14 18.41 20.73 18.82C20.33 19.22 19.87 19.52 19.34 19.73C18.82 19.93 18.28 20.02 17.73 19.99C17.08 19.99 16.46 19.84 15.87 19.55C15 19.14 14.31 18.51 13.78 17.67C13.26 16.83 13 15.91 13 14.9C13 12.09 14.7 7.56 18.54 4.29C18.77 4.07 19.03 3.98 19.33 4C19.64 4.02 19.89 4.15 20.08 4.4C20.27 4.65 20.35 4.93 20.31 5.25C20.27 5.56 20.12 5.81 19.88 6C17.98 7.63 16.59 9.64 15.7 12.04Z"
4444
export const ediEmoji = "M8.55 3.68C9.65 3.22 10.8 3 12 3C13.19 3 14.34 3.22 15.44 3.68Q16.27 4.02 17 4.51L17 4.51Q17.73 5 18.36 5.63Q18.99 6.26 19.48 6.99L19.48 6.99Q19.97 7.72 20.31 8.55C20.77 9.65 21 10.8 21 12C21 13.19 20.77 14.34 20.31 15.44Q19.97 16.27 19.48 17L19.48 17Q18.99 17.73 18.36 18.36C17.52 19.2 16.54 19.85 15.44 20.31C14.34 20.77 13.19 21 12 21C10.8 21 9.65 20.77 8.55 20.31C7.45 19.85 6.47 19.2 5.63 18.36Q5 17.73 4.51 17L4.51 17Q4.02 16.27 3.68 15.44C3.22 14.34 3 13.19 3 12C3 10.8 3.22 9.65 3.68 8.55Q4.02 7.72 4.51 6.99L4.51 6.99L4.51 6.99Q5 6.26 5.63 5.63Q6.26 5 6.99 4.51Q7.72 4.02 8.55 3.68ZM9.24 18.65C10.12 19.01 11.04 19.2 12 19.2C12.95 19.2 13.87 19.01 14.75 18.65C15.63 18.28 16.41 17.76 17.09 17.09C17.76 16.41 18.28 15.63 18.65 14.75C19.01 13.87 19.2 12.95 19.2 12C19.2 11.04 19.01 10.12 18.65 9.24C18.28 8.36 17.76 7.58 17.09 6.9Q16.58 6.4 16 6.01L16 6.01L16 6.01Q15.41 5.62 14.75 5.34C13.87 4.98 12.95 4.8 12 4.8C11.04 4.8 10.12 4.98 9.24 5.34C8.36 5.71 7.58 6.23 6.9 6.9C6.23 7.58 5.71 8.36 5.34 9.24C4.98 10.12 4.79 11.04 4.79 12C4.79 12.95 4.98 13.87 5.34 14.75C5.71 15.63 6.23 16.41 6.9 17.09C7.58 17.76 8.36 18.28 9.24 18.65ZM10.33 10.01Q10.14 10.2 9.91 10.29Q9.69 10.39 9.42 10.39C9.07 10.39 8.76 10.26 8.51 10.01C8.26 9.76 8.13 9.46 8.13 9.1C8.13 8.75 8.26 8.44 8.51 8.19C8.76 7.94 9.07 7.82 9.42 7.82Q9.69 7.82 9.91 7.91L9.91 7.91Q10.14 8 10.33 8.19C10.58 8.44 10.71 8.75 10.71 9.1C10.71 9.46 10.58 9.76 10.33 10.01ZM15.85 9.1C15.85 9.46 15.72 9.76 15.47 10.01C15.22 10.26 14.92 10.39 14.56 10.39Q14.3 10.39 14.07 10.29Q13.84 10.2 13.65 10.01C13.4 9.76 13.28 9.46 13.28 9.1C13.28 8.75 13.4 8.44 13.65 8.19Q13.84 8 14.07 7.91Q14.3 7.82 14.56 7.82C14.92 7.82 15.22 7.94 15.47 8.19C15.72 8.44 15.85 8.75 15.85 9.1ZM8.71 13.31C8.51 12.93 8.23 12.84 7.85 13.03C7.46 13.22 7.38 13.52 7.57 13.91C7.64 14.04 7.72 14.17 7.82 14.29C8.04 14.58 8.29 14.84 8.58 15.07C9.29 15.64 10.39 16.17 11.99 16.17C13.59 16.17 14.7 15.64 15.41 15.07C15.69 14.84 15.95 14.58 16.17 14.29C16.23 14.2 16.29 14.11 16.35 14.02C16.37 13.98 16.4 13.93 16.42 13.89C16.61 13.51 16.52 13.22 16.14 13.03C15.76 12.84 15.47 12.94 15.27 13.31C15.23 13.38 15.19 13.45 15.14 13.52C15.03 13.66 14.86 13.86 14.6 14.07C14.11 14.46 13.28 14.89 11.99 14.89C10.7 14.89 9.88 14.46 9.38 14.06C9.13 13.86 8.95 13.66 8.85 13.52C8.79 13.45 8.73 13.35 8.71 13.31Z"
@@ -60,6 +60,8 @@ export const ediToggleTableCell = "M4 3L20 3C20.55 3 21.02 3.19 21.41 3.58C21.8
6060
export const ediTableMergeCell = "M5 10L3 10L3 4L10 4L10 6L5 6L5 10ZM19 18L14 18L14 20L21 20L21 14L19 14L19 18ZM5 18L5 14L3 14L3 20L10 20L10 18L5 18ZM21 4L14 4L14 6L19 6L19 10L21 10L21 4ZM7.5 13L7.5 16.5L11.5 12L7.5 7.5L7.5 11L3 11L3 13L7.5 13ZM16.5 11L16.5 7.5L12.5 12L16.5 16.5L16.5 13L21 13L21 11L16.5 11Z"
6161
export const ediTableSplitCell = "M19 14L21 14L21 20L3 20L3 14L5 14L5 18L19 18L19 14ZM3 4L3 10L5 10L5 6L19 6L19 10L21 10L21 4L3 4ZM11 11L11 13L8 13L8 16.5L4 12L8 7.5L8 11L11 11ZM16 11L16 7.5L20 12L16 16.5L16 13L13 13L13 11L16 11Z"
6262

63+
export const ediPageBreak = "M17.71 18.88L6.28 18.88L6.28 17.08L4 17.08L4 19.2C4 19.69 4.19 20.12 4.58 20.47C4.97 20.82 5.44 21 6 21L18 21C18.55 21 19.02 20.82 19.41 20.47C19.8 20.12 20 19.69 20 19.2L20 17.08L17.71 17.08L17.71 18.88ZM14 3L6 3C5.44 3 4.97 3.17 4.58 3.52C4.19 3.87 4 4.3 4 4.8L4 12L6.28 12L6.28 5.29L14.12 5.29L14.12 8.89L17.71 8.89L17.71 12L20 12L20 8.39L14 3ZM11 15.6L8 15.6L7.99 13.66L10.99 13.66L11 15.6ZM16 15.6L13 15.6L12.99 13.66L15.99 13.66L16 15.6ZM2.99 13.66L6.28 13.66L6.28 15.6L3 15.6L2.99 13.66ZM21 15.6L17.71 15.6L17.71 13.66L20.99 13.66L21 15.6Z"
64+
6365
// helpers
6466
export const ediColorHelper = "M2 22L22 22L22 19L2 19L2 22Z"
6567
export const ediListDisc = "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"

0 commit comments

Comments
 (0)