Skip to content

Commit

Permalink
styles: update to icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@phodal
phodal committed Nov 20, 2023
1 parent 8030438 commit 93f5a76
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 198 deletions.
212 changes: 14 additions & 198 deletions components/editor/live-editor.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,196 +1,24 @@
import {Color} from '@tiptap/extension-color'
import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
import { FloatingMenu, Extension, useCurrentEditor, useEditor, EditorProvider} from '@tiptap/react'
import { EditorProvider, Extension, FloatingMenu, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React, {useEffect} from 'react'

const MenuBar = () => {
const {editor} = useCurrentEditor()

if (!editor) {
return null
}

return (
<>
<button
onClick={() => editor.chain().focus().toggleBold().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleBold()
.run()
}
className={editor.isActive('bold') ? 'is-active' : ''}
>
bold
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleItalic()
.run()
}
className={editor.isActive('italic') ? 'is-active' : ''}
>
italic
</button>
<button
onClick={() => editor.chain().focus().toggleStrike().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleStrike()
.run()
}
className={editor.isActive('strike') ? 'is-active' : ''}
>
strike
</button>
<button
onClick={() => editor.chain().focus().toggleCode().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleCode()
.run()
}
className={editor.isActive('code') ? 'is-active' : ''}
>
code
</button>
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
clear marks
</button>
<button onClick={() => editor.chain().focus().clearNodes().run()}>
clear nodes
</button>
<button
onClick={() => editor.chain().focus().setParagraph().run()}
className={editor.isActive('paragraph') ? 'is-active' : ''}
>
paragraph
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({level: 1}).run()}
className={editor.isActive('heading', {level: 1}) ? 'is-active' : ''}
>
h1
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({level: 2}).run()}
className={editor.isActive('heading', {level: 2}) ? 'is-active' : ''}
>
h2
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({level: 3}).run()}
className={editor.isActive('heading', {level: 3}) ? 'is-active' : ''}
>
h3
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({level: 4}).run()}
className={editor.isActive('heading', {level: 4}) ? 'is-active' : ''}
>
h4
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({level: 5}).run()}
className={editor.isActive('heading', {level: 5}) ? 'is-active' : ''}
>
h5
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({level: 6}).run()}
className={editor.isActive('heading', {level: 6}) ? 'is-active' : ''}
>
h6
</button>
<button
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'is-active' : ''}
>
bullet list
</button>
<button
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={editor.isActive('orderedList') ? 'is-active' : ''}
>
ordered list
</button>
<button
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={editor.isActive('codeBlock') ? 'is-active' : ''}
>
code block
</button>
<button
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive('blockquote') ? 'is-active' : ''}
>
blockquote
</button>
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
horizontal rule
</button>
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
hard break
</button>
<button
onClick={() => editor.chain().focus().undo().run()}
disabled={
!editor.can()
.chain()
.focus()
.undo()
.run()
}
>
undo
</button>
<button
onClick={() => editor.chain().focus().redo().run()}
disabled={
!editor.can()
.chain()
.focus()
.redo()
.run()
}
>
redo
</button>
<button
onClick={() => editor.chain().focus().setColor('#958DF1').run()}
className={editor.isActive('textStyle', {color: '#958DF1'}) ? 'is-active' : ''}
>
purple
</button>
</>
)
}
import React from 'react'
import { MenuBar } from './menu-bar'

const AiPlugin = Extension.create({
// @ts-ignore
addKeyboardShortcuts() {
addKeyboardShortcuts () {
return {
'/': (props) => {
const editor = props.editor
//
if (editor.isActive('paragraph')) {
console.log("paragraph")
console.log('paragraph')
}
// editor.isActive('heading', {level: 3})
if (editor.isActive('heading')) {
console.log("heading")
console.log('heading')
}
}
}
Expand All @@ -199,9 +27,9 @@ const AiPlugin = Extension.create({

const extensions = [
AiPlugin,
Color.configure({types: [TextStyle.name, ListItem.name]}),
Color.configure({ types: [TextStyle.name, ListItem.name] }),
// @ts-ignore
TextStyle.configure({types: [ListItem.name]}),
TextStyle.configure({ types: [ListItem.name] }),
StarterKit.configure({
bulletList: {
keepMarks: true,
Expand Down Expand Up @@ -251,30 +79,18 @@ const LiveEditor = () => {
content: content,
})

const [isEditable, setIsEditable] = React.useState(true)

useEffect(() => {
if (editor) {
editor.setEditable(isEditable)
}
}, [isEditable, editor])

return (
<>
<div>
<input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)}/>
Editable
</div>
{editor && <FloatingMenu editor={editor} tippyOptions={{duration: 100}}>
{editor && <FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
<button
onClick={() => editor.chain().focus().toggleHeading({level: 1}).run()}
className={editor.isActive('heading', {level: 1}) ? 'is-active' : ''}
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
h1
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({level: 2}).run()}
className={editor.isActive('heading', {level: 2}) ? 'is-active' : ''}
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
>
h2
</button>
Expand Down
135 changes: 135 additions & 0 deletions components/editor/menu-bar.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import { useCurrentEditor } from '@tiptap/react'
import {
ActivityLogIcon,
CodeIcon,
DividerHorizontalIcon,
FontBoldIcon,
FontItalicIcon,
ListBulletIcon,
QuoteIcon,
StrikethroughIcon, TextIcon
} from '@radix-ui/react-icons'
import React from 'react'

export const MenuBar = () => {
const { editor } = useCurrentEditor()

if (!editor) {
return null
}

return (
<>
<button
onClick={() => editor.chain().focus().toggleBold().run()}
disabled={!editor.can().chain().focus().toggleBold().run()}
className={editor.isActive('bold') ? 'is-active' : ''}
>
<FontBoldIcon/>
</button>
<button
onClick={() => editor.chain().focus().toggleItalic().run()}
disabled={!editor.can().chain().focus().toggleItalic().run()}
className={editor.isActive('italic') ? 'is-active' : ''}
>
<FontItalicIcon/>
</button>
<button
onClick={() => editor.chain().focus().toggleStrike().run()}
disabled={!editor.can().chain().focus().toggleStrike().run()}
className={editor.isActive('strike') ? 'is-active' : ''}
>
<StrikethroughIcon/>
</button>
<button
onClick={() => editor.chain().focus().toggleCode().run()}
disabled={!editor.can().chain().focus().toggleCode().run()}
className={editor.isActive('code') ? 'is-active' : ''}
>
<CodeIcon/>
</button>
<button
onClick={() => editor.chain().focus().setParagraph().run()}
className={editor.isActive('paragraph') ? 'is-active' : ''}
>
<TextIcon/>
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
>
H1
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
>
H2
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
>
H3
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
>
H4
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
>
H5
</button>
<button
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
>
H6
</button>
<button
onClick={() => editor.chain().focus().toggleBulletList().run()}
className={editor.isActive('bulletList') ? 'is-active' : ''}
>
<ListBulletIcon/>
</button>
<button
onClick={() => editor.chain().focus().toggleOrderedList().run()}
className={editor.isActive('orderedList') ? 'is-active' : ''}
>
<ActivityLogIcon/>
</button>
<button
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
className={editor.isActive('codeBlock') ? 'is-active' : ''}
>
<CodeIcon/>
</button>
<button
onClick={() => editor.chain().focus().toggleBlockquote().run()}
className={editor.isActive('blockquote') ? 'is-active' : ''}
>
<QuoteIcon/>
</button>
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
<DividerHorizontalIcon/>
</button>
<button
onClick={() => editor.chain().focus().undo().run()}
disabled={!editor.can().chain().focus().undo().run()}
>
undo
</button>
<button
onClick={() => editor.chain().focus().redo().run()}
disabled={!editor.can().chain().focus().redo().run()}
>
redo
</button>

</>
)
}
Loading

0 comments on commit 93f5a76

Please sign in to comment.