Skip to content

Commit

Permalink
continued work
Browse files Browse the repository at this point in the history
  • Loading branch information
@KonnorRogers
KonnorRogers committed Jun 28, 2022
1 parent f63984f commit 42a2dcb
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 22 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@tiptap/extension-placeholder": "^2.0.0-beta.48",
"@tiptap/starter-kit": "^2.0.0-beta.183",
"lit": "^2.2.2",
"prosemirror-state": "^1.3.4"
"prosemirror-state": "^1.3.4",
"role-components": "^1.0.4"
}
}
2 changes: 2 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

66 changes: 45 additions & 21 deletions src/tip-tap-element/element.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { tipTapCoreStyles } from "./tip-tap-core-styles"
import { Editor } from '@tiptap/core'
import "role-components"

// https://tiptap.dev/api/extensions/starter-kit#included-extensions
import StarterKit from '@tiptap/starter-kit'
Expand Down Expand Up @@ -119,7 +120,6 @@ export class TipTapElement extends LitElement {
.toolbar__button {
height: 2rem;
min-width: 2.5rem;
contain: strict;
position: relative;
margin: -1px;
border: 1px solid var(--border-color);
Expand Down Expand Up @@ -460,154 +460,178 @@ export class TipTapElement extends LitElement {

render (): TemplateResult {
return html`
<div class="toolbar" part="toolbar" role="toolbar">
<role-toolbar class="toolbar" part="toolbar" role="toolbar">
<button
class="toolbar__button"
part=${this.toolbarButtonParts("bold")}
title="Bold"
aria-describedby="bold"
aria-disabled=${!this.can("toggleBold")}
aria-pressed=${this.pressedButton("bold")}
data-role="toolbar-item"
@click=${() => this.run("toggleBold")}
>
<role-tooltip id="bold" no-contain .rootElement=${this.shadowRoot}>Bold</role-tooltip>
${this.icons.bold}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("italic")}
title="Italics"
aria-describedby="italics"
aria-disabled=${!this.can("toggleItalic")}
aria-pressed=${this.pressedButton("italic")}
data-role="toolbar-item"
@click=${() => this.run("toggleItalic")}
>
<role-tooltip id="italics" no-contain .rootElement=${this.shadowRoot}>Italics</role-tooltip>
${this.icons.italics}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("strike")}
title="Strikethrough"
aria-describedby="strikethrough"
aria-disabled=${!this.can("toggleStrike")}
aria-pressed=${this.pressedButton("strike")}
data-role="toolbar-item"
@click=${() => this.run("toggleStrike")}
>
<role-tooltip id="strikethrough" no-contain .rootElement=${this.shadowRoot}>Strikethrough</role-tooltip>
${this.icons.strikeThrough}
</button>
<button
class="toolbar__button"
tabindex="-1"
title="Link"
aria-describedby="link"
part=${this.toolbarButtonParts("link")}
aria-disabled=${!this.can("toggleLink")}
aria-pressed=${this.pressedButton("link")}
data-role="toolbar-item"
@click=${() => {
if (this.ariaDisabled === "true") return
this.toggleLinkDialog()
}}
>
<role-tooltip id="link" no-contain .rootElement=${this.shadowRoot}>Link</role-tooltip>
${this.icons.link}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("heading", { level: 1 })}
title="Heading"
aria-describedby="heading"
aria-disabled=${!this.can("toggleHeading", { level: 1 })}
aria-pressed=${this.pressedButton("link", { level: 1 })}
data-role="toolbar-item"
@click=${() => this.run("toggleHeading", { level: 1 })}
>
<role-tooltip id="heading" no-contain .rootElement=${this.shadowRoot}>Heading</role-tooltip>
${this.icons.heading}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("blockquote") }
title="Quote"
aria-describedby="block-quote"
aria-disabled=${!this.can("toggleBlockquote")}
aria-pressed=${this.pressedButton("link")}
data-role="toolbar-item"
@click=${() => this.run("toggleBlockquote")}
>
<role-tooltip id="block-quote" no-contain .rootElement=${this.shadowRoot}>Block Quote</role-tooltip>
${this.icons.quote}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("code")}
title="Code"
aria-disabled=${!this.can("toggleBlockquote")}
aria-describedby="code"
aria-disabled=${!this.can("toggleCode")}
aria-pressed=${this.pressedButton("code")}
data-role="toolbar-item"
@click=${() => this.run("toggleCode")}
>
<role-tooltip id="code" no-contain .rootElement=${this.shadowRoot}>Code</role-tooltip>
${this.icons.code}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("bulletList")}
title="Bullets"
aria-describedby="bullets"
aria-disabled=${!this.can("toggleBulletList")}
aria-pressed=${this.pressedButton("bulletList")}
data-role="toolbar-item"
@click=${() => this.run("toggleBulletList")}
>
<role-tooltip id="bullets" no-contain .rootElement=${this.shadowRoot}>Bullets</role-tooltip>
${this.icons.bullets}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("orderedList")}
title="Numbers"
aria-describedby="ordered-list"
aria-disabled=${!this.can("toggleOrderedList")}
aria-pressed=${this.pressedButton("orderedList")}
data-role="toolbar-item"
@click=${() => this.run("toggleOrderedList")}
>
<role-tooltip id="ordered-list" no-contain .rootElement=${this.shadowRoot}>Ordered List</role-tooltip>
${this.icons.numbers}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("files")}
title="Attach Files"
aria-describedby="attach-files"
aria-disabled=${this.editor == null}
data-role="toolbar-item"
@click=${async () => await this.attachFiles()}
>
<role-tooltip id="attach-files" no-contain .rootElement=${this.shadowRoot}>Attach Files</role-tooltip>
${this.icons.files}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("undo")}
title="Undo"
aria-describedby="undo"
aria-disabled=${!this.can("undo")}
data-role="toolbar-item"
@click=${() => this.run("undo")}
>
<role-tooltip id="undo" no-contain .rootElement=${this.shadowRoot}>Undo</role-tooltip>
${this.icons.undo}
</button>
<button
class="toolbar__button"
tabindex="-1"
part=${this.toolbarButtonParts("redo")}
title="Redo"
aria-describedby="redo"
aria-disabled=${!this.can("redo")}
data-role="toolbar-item"
@click=${() => this.run("redo")}
>
${this.icons.redo}
<role-tooltip id="redo" no-contain .rootElement=${this.shadowRoot}>Redo</role-tooltip>
${this.icons.redo}
</button>
</div>
</role-toolbar>
<div ${ref(this.editorElementChanged)} style="position: relative;">
<div class="link-dialog" hidden @click=${(event) => {
if (event.currentTarget.contains(event.target) && event.currentTarget !== event.target) {
<div class="link-dialog" hidden @click=${(event: MouseEvent) => {
if ((event.currentTarget as HTMLElement).contains(event.target as HTMLElement) && event.currentTarget !== event.target) {
return
}
Expand All @@ -633,8 +657,8 @@ export class TipTapElement extends LitElement {
inputElement.classList.remove("link-validate")
inputElement.value = ""
}}
@keydown=${(e) => {
if (e.key.toLowerCase() === "enter") {
@keydown=${(e: KeyboardEvent) => {
if (e.key?.toLowerCase() === "enter") {
e.preventDefault()
this.addLink()
}
Expand Down

0 comments on commit 42a2dcb

Please sign in to comment.