todo {action.type}
}
return (
-
-
-
-
-
+
- {minted}/{supply} minted
+ {minted}/{supply}{" "}
+ minted
{complete && }
{children}
@@ -77,20 +64,20 @@ export function MintProgress({
@@ -104,4 +91,4 @@ export function MintProgress({
)}
)
-}
\ No newline at end of file
+}
diff --git a/src/components/Artwork/Preview.tsx b/src/components/Artwork/Preview.tsx
index 9c04f2eca..a1bc35c0e 100644
--- a/src/components/Artwork/Preview.tsx
+++ b/src/components/Artwork/Preview.tsx
@@ -1,14 +1,14 @@
-import { ipfsGatewayUrl } from '../../services/Ipfs'
-import { useLazyImage } from '../../utils/hookts'
-import { Loader } from '../Utils/Loader'
-import style from './Artwork.module.scss'
-import { ArtworkFrame } from './ArtworkFrame'
+import { ipfsGatewayUrl } from "../../services/Ipfs"
+import { useLazyImage } from "../../utils/hookts"
+import { Loader } from "../Utils/Loader"
+import style from "./Artwork.module.scss"
+import { ArtworkFrame } from "./ArtworkFrame"
interface Props {
ipfsUri?: string
url?: string
alt?: string
- loading?: string|boolean
+ loading?: string | boolean
}
export function ArtworkPreview({
@@ -26,4 +26,4 @@ export function ArtworkPreview({
{loading && !loaded &&
+
+ src={src}
+ width="660px"
+ height="380"
+ frameBorder="0"
+ sandbox="allow-same-origin allow-scripts"
+ allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+ >
- );
-});
-EmbedSpotify.displayName = 'EmbedSpotify';
+ )
+})
+EmbedSpotify.displayName = "EmbedSpotify"
-export default EmbedSpotify;
+export default EmbedSpotify
diff --git a/src/components/NFTArticle/elements/Embed/EmbedTwitter.tsx b/src/components/NFTArticle/elements/Embed/EmbedTwitter.tsx
index 571835c7b..571b13f2c 100644
--- a/src/components/NFTArticle/elements/Embed/EmbedTwitter.tsx
+++ b/src/components/NFTArticle/elements/Embed/EmbedTwitter.tsx
@@ -1,70 +1,74 @@
-import React, { memo, useState, useEffect } from 'react';
-import { EmbedElementProps } from "./EmbedMediaDisplay";
-import { getTweetIdFromUrl } from "../../../../utils/embed";
-import style from "./Embed.module.scss";
-import { Error } from "../../../Error/Error";
-import useInit from "../../../../hooks/useInit";
-import Skeleton from "../../../Skeleton";
-import { LoaderBlock } from "../../../Layout/LoaderBlock";
+import React, { memo, useState, useEffect } from "react"
+import { EmbedElementProps } from "./EmbedMediaDisplay"
+import { getTweetIdFromUrl } from "../../../../utils/embed"
+import style from "./Embed.module.scss"
+import { Error } from "../../../Error/Error"
+import useInit from "../../../../hooks/useInit"
+import Skeleton from "../../../Skeleton"
+import { LoaderBlock } from "../../../Layout/LoaderBlock"
-const twitterWidgetJs = 'https://platform.twitter.com/widgets.js';
+const twitterWidgetJs = "https://platform.twitter.com/widgets.js"
declare global {
interface Window {
- twttr: any;
+ twttr: any
}
}
-const EmbedTwitter = memo
+ {isLoading && (
+ No tweet found for this url }
- );
-});
+ )
+})
-EmbedTwitter.displayName = 'EmbedTwitter';
-export default EmbedTwitter;
+EmbedTwitter.displayName = "EmbedTwitter"
+export default EmbedTwitter
diff --git a/src/components/NFTArticle/elements/Embed/EmbedYoutube.tsx b/src/components/NFTArticle/elements/Embed/EmbedYoutube.tsx
index 0336e5cdd..edf176142 100644
--- a/src/components/NFTArticle/elements/Embed/EmbedYoutube.tsx
+++ b/src/components/NFTArticle/elements/Embed/EmbedYoutube.tsx
@@ -1,29 +1,26 @@
-import React, { memo, useMemo } from 'react'
+import React, { memo, useMemo } from "react"
import style from "./Embed.module.scss"
import cs from "classnames"
-import { getYoutubeCodeFromUrl } from "../../../../utils/embed";
-import { EmbedElementProps } from "./EmbedMediaDisplay";
+import { getYoutubeCodeFromUrl } from "../../../../utils/embed"
+import { EmbedElementProps } from "./EmbedMediaDisplay"
const EmbedYoutube = memo(({ href }) => {
const embedUrl = useMemo(() => {
- const code = getYoutubeCodeFromUrl(href);
- return `https://www.youtube.com/embed/${code}`;
- }, [href]);
+ const code = getYoutubeCodeFromUrl(href)
+ return `https://www.youtube.com/embed/${code}`
+ }, [href])
return (
- = {
name: "Math",
- icon: ,
+ icon: ,
buttonInstantiable: true,
render: ({ attributes, element, children }) => (
= {
name: "Math",
- icon: ,
+ icon: ,
render: ({ attributes, element, children }) => (
-
- inline math
-
+ inline math
),
hasUtilityWrapper: false,
}
diff --git a/src/components/NFTArticle/elements/Math/MathProcessor.ts b/src/components/NFTArticle/elements/Math/MathProcessor.ts
index 443c0e38b..00b8f7337 100644
--- a/src/components/NFTArticle/elements/Math/MathProcessor.ts
+++ b/src/components/NFTArticle/elements/Math/MathProcessor.ts
@@ -1,15 +1,15 @@
-import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor";
+import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor"
export const mathProcessor: IArticleElementProcessor = {
transformMarkdownMdhastToSlate: (node: any) => {
return {
type: node.type,
- children: [{ text: '' }],
+ children: [{ text: "" }],
math: node.value,
}
},
transformSlateToMarkdownMdhast: (node: any) => ({
type: node.type,
value: node.math,
- })
+ }),
}
diff --git a/src/components/NFTArticle/elements/Mention/FloatingMentionMenu.module.scss b/src/components/NFTArticle/elements/Mention/FloatingMentionMenu.module.scss
new file mode 100644
index 000000000..8512c92f5
--- /dev/null
+++ b/src/components/NFTArticle/elements/Mention/FloatingMentionMenu.module.scss
@@ -0,0 +1,11 @@
+.floating_menu {
+ top: -9999px;
+ left: -9999px;
+ position: absolute;
+ z-index: 2;
+ background: var(--color-white);
+}
+.search_results {
+ border: 2px solid var(--color-gray-vvlight) !important;
+ left: -2px !important;
+}
diff --git a/src/components/NFTArticle/elements/Mention/FloatingMentionMenu.tsx b/src/components/NFTArticle/elements/Mention/FloatingMentionMenu.tsx
new file mode 100644
index 000000000..a7bd68b36
--- /dev/null
+++ b/src/components/NFTArticle/elements/Mention/FloatingMentionMenu.tsx
@@ -0,0 +1,140 @@
+import React, {
+ forwardRef,
+ useCallback,
+ useEffect,
+ useImperativeHandle,
+ useRef,
+ useState,
+} from "react"
+import { ReactEditor, useSlate } from "slate-react"
+import { Editor, Range, Transforms } from "slate"
+import ReactDOM from "react-dom"
+import { InputSearchUser } from "../../../Input/InputSearchUser"
+import { mentionDefinition } from "./MentionDefinition"
+import style from "./FloatingMentionMenu.module.scss"
+import { User } from "../../../../types/entities/User"
+
+export interface RefFloatingMentionMenu {
+ onKeyDown: (event: React.KeyboardEvent) => void
+}
+export const FloatingMentionMenu = forwardRef(
+ (props, ref) => {
+ const editor = useSlate()
+ const refFloatingMenu = useRef(null)
+ const [target, setTarget] = useState()
+ const [index, setIndex] = useState(0)
+ const [search, setSearch] = useState("")
+ const [fetchedUsers, setFetchedUsers] = useState([])
+
+ const handleFetchUsers = useCallback((users) => {
+ setIndex(0)
+ setFetchedUsers(users)
+ }, [])
+ const handleSelectUser = useCallback(
+ (tzAddress: string) => {
+ if (target) {
+ Transforms.select(editor, target)
+ }
+ const mention = mentionDefinition.instanciateElement!({ tzAddress })
+ Transforms.insertNodes(editor, mention)
+ Transforms.move(editor)
+ setTarget(null)
+ },
+ [editor, target]
+ )
+ const handleKeyDown = useCallback(
+ (event: React.KeyboardEvent) => {
+ if (target) {
+ switch (event.key) {
+ case "ArrowDown":
+ event.preventDefault()
+ const prevIndex = index >= fetchedUsers.length - 1 ? 0 : index + 1
+ setIndex(prevIndex)
+ break
+ case "ArrowUp":
+ event.preventDefault()
+ const nextIndex = index <= 0 ? fetchedUsers.length - 1 : index - 1
+ setIndex(nextIndex)
+ break
+ case "Tab":
+ case "Enter":
+ event.preventDefault()
+ const selectedUser = fetchedUsers[index]
+ if (selectedUser) {
+ handleSelectUser(selectedUser.id)
+ }
+ setTarget(null)
+ break
+ case "Escape":
+ event.preventDefault()
+ setTarget(null)
+ break
+ }
+ }
+ },
+ [fetchedUsers, handleSelectUser, index, target]
+ )
+
+ useEffect(() => {
+ const { selection } = editor
+
+ if (selection && Range.isCollapsed(selection)) {
+ const [start] = Range.edges(selection)
+ const wordBefore = Editor.before(editor, start, { unit: "word" })
+ const before = wordBefore && Editor.before(editor, wordBefore)
+ const beforeRange = before && Editor.range(editor, before, start)
+ const beforeText = beforeRange && Editor.string(editor, beforeRange)
+ const beforeMatch = beforeText && beforeText.match(/^@(\w+)$/)
+ const after = Editor.after(editor, start)
+ const afterRange = Editor.range(editor, start, after)
+ const afterText = Editor.string(editor, afterRange)
+ const afterMatch = afterText.match(/^(\s|$)/)
+ if (beforeMatch && afterMatch) {
+ setTarget(beforeRange)
+ setSearch(beforeMatch[1])
+ setIndex(0)
+ return
+ }
+ }
+ setTarget(null)
+ }, [editor, editor.selection])
+
+ useEffect(() => {
+ if (target && search.length > 2) {
+ const el = refFloatingMenu.current
+ const domRange = ReactEditor.toDOMRange(editor, target)
+ const rect = domRange.getBoundingClientRect()
+ if (el) {
+ el.style.top = `${rect.top + window.pageYOffset + 24}px`
+ el.style.left = `${rect.left + window.pageXOffset}px`
+ }
+ }
+ }, [search.length, editor, index, search, target])
+ useImperativeHandle(
+ ref,
+ () => ({
+ onKeyDown: handleKeyDown,
+ }),
+ [handleKeyDown]
+ )
+
+ return target
+ ? ReactDOM.createPortal(
+ =
+ {
+ name: "Mention",
+ icon: ,
+ render: MentionEditor,
+ hasUtilityWrapper: false,
+ inlineMenu: null,
+ instanciateElement: ({ tzAddress } = { tzAddress: "" }) => ({
+ type: "mention",
+ tzAddress,
+ children: [{ text: "" }],
+ }),
+ }
diff --git a/src/components/NFTArticle/elements/Mention/MentionDisplay.tsx b/src/components/NFTArticle/elements/Mention/MentionDisplay.tsx
new file mode 100644
index 000000000..3e6a85fbe
--- /dev/null
+++ b/src/components/NFTArticle/elements/Mention/MentionDisplay.tsx
@@ -0,0 +1,25 @@
+import React, { memo } from "react"
+import { UserFromAddress } from "../../../User/UserFromAddress"
+import style from "./MentionEditor.module.scss"
+import cs from "classnames"
+import Link from "next/link"
+import { getUserName, getUserProfileLink } from "../../../../utils/user"
+
+interface MentionDisplayProps {
+ tzAddress: string
+}
+
+const _MentionDisplay = ({ tzAddress }: MentionDisplayProps) => (
+
+ {({ user }) => (
+
+
+ {`@`}
+ {getUserName(user)}
+
+
+ )}
+
+)
+
+export const MentionDisplay = memo(_MentionDisplay)
diff --git a/src/components/NFTArticle/elements/Mention/MentionEditor.module.scss b/src/components/NFTArticle/elements/Mention/MentionEditor.module.scss
new file mode 100644
index 000000000..677b68767
--- /dev/null
+++ b/src/components/NFTArticle/elements/Mention/MentionEditor.module.scss
@@ -0,0 +1,16 @@
+@import "../../../../styles/fonts";
+.mention_user {
+ vertical-align: bottom;
+}
+
+.mention_display {
+ padding: 0 4px;
+ background: var(--color-gray-vvvlight);
+ border-radius: 4px;
+ font-weight: 600;
+ color: var(--color-primary);
+}
+
+.mention_focused {
+ box-shadow: 0 0 0 2px var(--color-primary);
+}
diff --git a/src/components/NFTArticle/elements/Mention/MentionEditor.tsx b/src/components/NFTArticle/elements/Mention/MentionEditor.tsx
new file mode 100644
index 000000000..c01b0ae38
--- /dev/null
+++ b/src/components/NFTArticle/elements/Mention/MentionEditor.tsx
@@ -0,0 +1,27 @@
+import { RenderElementProps, useFocused, useSelected } from "slate-react"
+import style from "./MentionEditor.module.scss"
+import { UserFromAddress } from "../../../User/UserFromAddress"
+import cs from "classnames"
+import { UserBadge } from "../../../User/UserBadge"
+import { MentionDisplay } from "./MentionDisplay"
+
+export const MentionEditor = ({
+ attributes,
+ children,
+ element,
+}: RenderElementProps) => {
+ const selected = useSelected()
+ const focused = useFocused()
+ return (
+
+ {children}
+ = {
name: "Paragraph",
- icon: ,
+ icon: ,
buttonInstantiable: true,
render: ({ attributes, element, children }) => (
= {
hasUtilityWrapper: true,
instanciateElement: () => ({
type: "paragraph",
- children: [{
- text: ""
- }]
+ children: [
+ {
+ text: "",
+ },
+ ],
}),
}
diff --git a/src/components/NFTArticle/elements/Table/TableCellEditor.tsx b/src/components/NFTArticle/elements/Table/TableCellEditor.tsx
index 07b89ac2e..1f31526fa 100644
--- a/src/components/NFTArticle/elements/Table/TableCellEditor.tsx
+++ b/src/components/NFTArticle/elements/Table/TableCellEditor.tsx
@@ -1,30 +1,43 @@
-import React, { useMemo } from 'react';
+import React, { useMemo } from "react"
import style from "./TableEditor.module.scss"
-import { ReactEditor, RenderElementProps, useSelected, useSlate } from "slate-react";
-import cs from "classnames";
-import { Path, Node } from "slate";
+import {
+ ReactEditor,
+ RenderElementProps,
+ useSelected,
+ useSlate,
+} from "slate-react"
+import cs from "classnames"
+import { Path, Node } from "slate"
-export const TableCellEditor = ({ attributes, element, children }: RenderElementProps) => {
- const editor = useSlate();
- const path = ReactEditor.findPath(editor, element);
- const isSelected = useSelected();
- const align = useMemo<'left'|'center'|'right'>(() => {
- const row = path[path.length - 1];
- const table = Path.parent(Path.parent(path));
- const nodeTable = Node.get(editor, table);
- if (nodeTable.align) return nodeTable.align[row];
- return 'left';
+export const TableCellEditor = ({
+ attributes,
+ element,
+ children,
+}: RenderElementProps) => {
+ const editor = useSlate()
+ const path = ReactEditor.findPath(editor, element)
+ const isSelected = useSelected()
+ const align = useMemo<"left" | "center" | "right">(() => {
+ const row = path[path.length - 1]
+ const table = Path.parent(Path.parent(path))
+ const nodeTable = Node.get(editor, table)
+ if (nodeTable.align) return nodeTable.align[row]
+ return "left"
}, [editor, path])
const isHeader = useMemo(() => {
- const pathParent = Path.parent(path);
- const trIdx = pathParent[pathParent.length - 1];
- return trIdx === 0;
+ const pathParent = Path.parent(path)
+ const trIdx = pathParent[pathParent.length - 1]
+ return trIdx === 0
}, [path])
- const Cell = isHeader ? 'th' : 'td';
+ const Cell = isHeader ? "th" : "td"
return (
-
+ |
{children}
|
)
diff --git a/src/components/NFTArticle/elements/Table/TableColToolbar.tsx b/src/components/NFTArticle/elements/Table/TableColToolbar.tsx
index 800ceb2f2..1839686ea 100644
--- a/src/components/NFTArticle/elements/Table/TableColToolbar.tsx
+++ b/src/components/NFTArticle/elements/Table/TableColToolbar.tsx
@@ -1,47 +1,63 @@
-import React, { memo, MouseEventHandler, useCallback } from 'react';
-import style from "./TableEditor.module.scss";
+import React, { memo, MouseEventHandler, useCallback } from "react"
+import style from "./TableEditor.module.scss"
import effects from "../../../../styles/Effects.module.scss"
-import Slate, { Editor } from "slate";
-import { SlateTable } from "../../SlateEditor/Plugins/SlateTablePlugin";
-import cs from "classnames";
+import Slate, { Editor } from "slate"
+import { SlateTable } from "../../SlateEditor/Plugins/SlateTablePlugin"
+import cs from "classnames"
-type Alignment = 'left'|'center'|'right';
-type ToggleColAlignment = (newAlign: Alignment) => MouseEventHandler
-const alignments: Alignment[] = ['left', 'center', 'right'];
+type Alignment = "left" | "center" | "right"
+type ToggleColAlignment = (
+ newAlign: Alignment
+) => MouseEventHandler
+const alignments: Alignment[] = ["left", "center", "right"]
interface TableColToolbarProps {
- col: number,
+ col: number
row: number
tableElement: Slate.Element
editor: Editor
}
-const _TableColToolbar = ({ col, row, editor, tableElement }: TableColToolbarProps) => {
- const { cols, rows } = SlateTable.getTableInfos(tableElement);
- const styleContainer = { left: `${col * 100 / cols}%` };
- const colAlign = tableElement.align[col];
- const handleToggleColAlignment = useCallback((newAlign) => (e) => {
- e.preventDefault()
- SlateTable.setColAlignment(editor, tableElement, col, newAlign);
- }, [col, editor, tableElement])
- const handleDeleteCol = useCallback((e) => {
- e.preventDefault();
- if (cols > 1) {
- SlateTable.deleteCol(editor, tableElement, col);
- }
- }, [col, cols, editor, tableElement])
- const handleDeleteRow = useCallback((e) => {
- e.preventDefault();
- if (rows > 1) {
- SlateTable.deleteRow(editor, tableElement, row);
- }
- }, [editor, row, rows, tableElement])
+const _TableColToolbar = ({
+ col,
+ row,
+ editor,
+ tableElement,
+}: TableColToolbarProps) => {
+ const { cols, rows } = SlateTable.getTableInfos(tableElement)
+ const styleContainer = { left: `${(col * 100) / cols}%` }
+ const colAlign = tableElement.align[col]
+ const handleToggleColAlignment = useCallback(
+ (newAlign) => (e) => {
+ e.preventDefault()
+ SlateTable.setColAlignment(editor, tableElement, col, newAlign)
+ },
+ [col, editor, tableElement]
+ )
+ const handleDeleteCol = useCallback(
+ (e) => {
+ e.preventDefault()
+ if (cols > 1) {
+ SlateTable.deleteCol(editor, tableElement, col)
+ }
+ },
+ [col, cols, editor, tableElement]
+ )
+ const handleDeleteRow = useCallback(
+ (e) => {
+ e.preventDefault()
+ if (rows > 1) {
+ SlateTable.deleteRow(editor, tableElement, row)
+ }
+ },
+ [editor, row, rows, tableElement]
+ )
return (
= {
name: "Table",
- icon: ,
+ icon: ,
buttonInstantiable: true,
render: ({ attributes, element, children }) => (
@@ -13,17 +13,16 @@ export const tableDefinition: IArticleBlockDefinition = {
),
hasUtilityWrapper: true,
+ hasDeleteBehaviorRemoveBlock: true,
instanciateElement: () => SlateTable.createTable(2, 2),
preventAutofocusTrigger: true,
}
export const tableRowDefinition: IArticleBlockDefinition = {
name: "Table row",
- icon: ,
+ icon: ,
render: ({ attributes, element, children }) => {
- return (
- {children}
- );
+ return {children}
},
hasUtilityWrapper: false,
}
@@ -33,5 +32,5 @@ export const tableCellDefinition: IArticleBlockDefinition = {
icon: ,
render: TableCellEditor,
hasUtilityWrapper: false,
- inlineMenu: ['strong', 'emphasis'],
+ inlineMenu: ["strong", "emphasis"],
}
diff --git a/src/components/NFTArticle/elements/Table/TableEditor.tsx b/src/components/NFTArticle/elements/Table/TableEditor.tsx
index 9cb2ff2f1..ab2816788 100644
--- a/src/components/NFTArticle/elements/Table/TableEditor.tsx
+++ b/src/components/NFTArticle/elements/Table/TableEditor.tsx
@@ -1,9 +1,9 @@
-import React, { memo, MouseEventHandler, useCallback } from 'react';
+import React, { memo, MouseEventHandler, useCallback } from "react"
import style from "./TableEditor.module.scss"
-import { RenderElementProps, useSelected, useSlate } from "slate-react";
-import Slate from "slate";
-import { SlateTable } from "../../SlateEditor/Plugins/SlateTablePlugin";
-import { TableColToolbar } from "./TableColToolbar";
+import { RenderElementProps, useSelected, useSlate } from "slate-react"
+import Slate from "slate"
+import { SlateTable } from "../../SlateEditor/Plugins/SlateTablePlugin"
+import { TableColToolbar } from "./TableColToolbar"
import cs from "classnames"
interface TableEditorProps {
@@ -12,33 +12,42 @@ interface TableEditorProps {
children: any
}
-const _TableEditor = ({ slateAttributes, slateElement, children }: TableEditorProps) => {
- const editor = useSlate();
- const [head, ...body] = children;
- const isSelected = useSelected();
- const handleClickAddCol = useCallback>((e) => {
- e.preventDefault();
- SlateTable.addCol(editor, slateElement);
- }, [editor, slateElement])
- const handleClickAddRow = useCallback>((e) => {
- e.preventDefault();
- SlateTable.addRow(editor, slateElement)
- }, [editor, slateElement]);
- const selectedPos = isSelected && SlateTable.getSelectedPos(editor, slateElement);
+const _TableEditor = ({
+ slateAttributes,
+ slateElement,
+ children,
+}: TableEditorProps) => {
+ const editor = useSlate()
+ const [head, ...body] = children
+ const isSelected = useSelected()
+ const handleClickAddCol = useCallback>(
+ (e) => {
+ e.preventDefault()
+ SlateTable.addCol(editor, slateElement)
+ },
+ [editor, slateElement]
+ )
+ const handleClickAddRow = useCallback>(
+ (e) => {
+ e.preventDefault()
+ SlateTable.addRow(editor, slateElement)
+ },
+ [editor, slateElement]
+ )
+ const selectedPos =
+ isSelected && SlateTable.getSelectedPos(editor, slateElement)
return (
- |
+
+
{text === "" && (
setShowAddImage(false)}
- >
+ setShowAddImage(false)}>
{
+ onEdit={(element) => {
setImage(element)
setShowAddImage(false)
}}
diff --git a/src/components/NFTArticle/elements/Image/ImageProcessor.ts b/src/components/NFTArticle/elements/Image/ImageProcessor.ts
index 60c70e229..6ae9524ee 100644
--- a/src/components/NFTArticle/elements/Image/ImageProcessor.ts
+++ b/src/components/NFTArticle/elements/Image/ImageProcessor.ts
@@ -1,21 +1,28 @@
-import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor";
+import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor"
export const imageProcessor: IArticleElementProcessor = {
transformMarkdownMdhastToSlate: (node) => {
- return ({
+ return {
type: "figure",
- children: [{
- type: "image",
- url: node.url,
- children: [{
- text: ""
- }],
- }, {
- type: "figcaption",
- children: [{
- text: node.alt
- }]
- }]
- });
- }
+ children: [
+ {
+ type: "image",
+ url: node.url,
+ children: [
+ {
+ text: "",
+ },
+ ],
+ },
+ {
+ type: "figcaption",
+ children: [
+ {
+ text: node.alt,
+ },
+ ],
+ },
+ ],
+ }
+ },
}
diff --git a/src/components/NFTArticle/elements/Link/LinkDefinition.tsx b/src/components/NFTArticle/elements/Link/LinkDefinition.tsx
index e144dfdc3..c52c1a023 100644
--- a/src/components/NFTArticle/elements/Link/LinkDefinition.tsx
+++ b/src/components/NFTArticle/elements/Link/LinkDefinition.tsx
@@ -1,16 +1,50 @@
-import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition";
+import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition"
+
+export function sanitizeUrl(url: string) {
+ if (!url) {
+ return "about:blank"
+ }
+
+ var invalidProtocolRegex = /^(%20|\s)*(javascript|data|vbscript)/im
+ var ctrlCharactersRegex = /[^\x20-\x7EÀ-ž]/gim
+ var urlSchemeRegex = /^([^:]+):/gm
+ var relativeFirstCharacters = [".", "/"]
+
+ function _isRelativeUrlWithoutProtocol(url: string) {
+ return relativeFirstCharacters.indexOf(url[0]) > -1
+ }
+
+ var sanitizedUrl = url.replace(ctrlCharactersRegex, "").trim()
+ if (_isRelativeUrlWithoutProtocol(sanitizedUrl)) {
+ return sanitizedUrl
+ }
+
+ var urlSchemeParseResults = sanitizedUrl.match(urlSchemeRegex)
+ if (!urlSchemeParseResults) {
+ return sanitizedUrl
+ }
+
+ var urlScheme = urlSchemeParseResults[0]
+ if (invalidProtocolRegex.test(urlScheme)) {
+ return "about:blank"
+ }
+
+ return sanitizedUrl
+}
export const linkDefinition: IArticleBlockDefinition = {
name: "Link",
- icon: ,
- render: ({ attributes, element, children }) => (
-
- {children}
-
- ),
+ icon: ,
+ render: ({ attributes, element, children }) => {
+ return (
+
+ {children}
+
+ )
+ },
hasUtilityWrapper: false,
}
diff --git a/src/components/NFTArticle/elements/Link/LinkElement.tsx b/src/components/NFTArticle/elements/Link/LinkElement.tsx
new file mode 100644
index 000000000..eb30f09f2
--- /dev/null
+++ b/src/components/NFTArticle/elements/Link/LinkElement.tsx
@@ -0,0 +1,10 @@
+import { PropsWithChildren, useMemo } from "react"
+import { sanitizeUrl } from "./LinkDefinition"
+
+interface Props {
+ href: string
+}
+export function LinkElement({ href, children }: PropsWithChildren) {
+ const sanitized = useMemo(() => sanitizeUrl(href), [href])
+ return {children}
+}
diff --git a/src/components/NFTArticle/elements/List/ListAttributeSettings.tsx b/src/components/NFTArticle/elements/List/ListAttributeSettings.tsx
index c8de2ebb9..b9a3702cb 100644
--- a/src/components/NFTArticle/elements/List/ListAttributeSettings.tsx
+++ b/src/components/NFTArticle/elements/List/ListAttributeSettings.tsx
@@ -1,6 +1,6 @@
import cs from "classnames"
import { ContextualMenuItems } from "../../../Menus/ContextualMenuItems"
-import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition";
+import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition"
export const ListAttributeSettings: TEditAttributeComp = ({
element,
@@ -10,26 +10,30 @@ export const ListAttributeSettings: TEditAttributeComp = ({
diff --git a/src/components/NFTArticle/elements/List/ListDefinition.tsx b/src/components/NFTArticle/elements/List/ListDefinition.tsx
index 73a2c1c38..6a4a2f328 100644
--- a/src/components/NFTArticle/elements/List/ListDefinition.tsx
+++ b/src/components/NFTArticle/elements/List/ListDefinition.tsx
@@ -1,36 +1,39 @@
-import { ListAttributeSettings } from "./ListAttributeSettings";
-import { Editor, Element, Node, Path, Range, Transforms } from "slate";
-import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition";
+import { ListAttributeSettings } from "./ListAttributeSettings"
+import { Editor, Element, Node, Path, Range, Transforms } from "slate"
+import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition"
export const listDefinition: IArticleBlockDefinition = {
name: "List",
- icon: ,
+ icon: ,
buttonInstantiable: true,
- render: ({ attributes, element, children }) => (
+ render: ({ attributes, element, children }) =>
element.ordered ? (
= {
name: "List Item",
- icon: ,
+ icon: ,
render: ({ attributes, element, children }) => (
{element.checked === true ? (
@@ -42,23 +45,30 @@ export const listItemDefinition: IArticleBlockDefinition = {
),
insertBreakBehavior: (editor, element) => {
- const { selection } = editor;
- if (selection && !Range.isCollapsed(selection)) return true;
- const [nodeListItem, pathListItem] = element;
- const text = Node.string(nodeListItem);
- if (text) return true;
+ const { selection } = editor
+ if (selection && !Range.isCollapsed(selection)) return true
+ const [nodeListItem, pathListItem] = element
+ const text = Node.string(nodeListItem)
+ if (text) return true
+ const nextLi = Path.next(pathListItem)
+ const hasNextLi = Node.has(editor, nextLi)
+ if (hasNextLi) return true
const parentList = Editor.above(editor, {
at: pathListItem,
- match: n =>
- !Editor.isEditor(n) && Element.isElement(n) && n.type === 'list',
- mode: 'lowest',
+ match: (n) =>
+ !Editor.isEditor(n) && Element.isElement(n) && n.type === "list",
+ mode: "lowest",
})
- if (!parentList) return true;
+ if (!parentList) return true
const [, pathParentList] = parentList
- const next = Path.next(pathParentList);
- Transforms.setNodes(editor, { type: 'paragraph' }, {
- at: pathListItem,
- })
+ const next = Path.next(pathParentList)
+ Transforms.setNodes(
+ editor,
+ { type: "paragraph" },
+ {
+ at: pathListItem,
+ }
+ )
Transforms.moveNodes(editor, {
at: pathListItem,
to: next,
diff --git a/src/components/NFTArticle/elements/Math/BlockKatexEditor.tsx b/src/components/NFTArticle/elements/Math/BlockKatexEditor.tsx
index 317e95c95..ea04eea21 100644
--- a/src/components/NFTArticle/elements/Math/BlockKatexEditor.tsx
+++ b/src/components/NFTArticle/elements/Math/BlockKatexEditor.tsx
@@ -1,56 +1,82 @@
-import React, { memo, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
-import Slate, { Transforms } from 'slate';
-import style from "./BlockKatex.module.scss";
-import { ReactEditor, RenderElementProps, useSlateStatic, useSelected } from "slate-react";
-import { Katex } from "./Katex";
-import TextareaAutosize from "react-textarea-autosize";
-import cs from "classnames";
-import useClickOutside from "../../../../hooks/useClickOutside";
+import React, {
+ memo,
+ PropsWithChildren,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from "react"
+import Slate, { Transforms } from "slate"
+import style from "./BlockKatex.module.scss"
+import {
+ ReactEditor,
+ RenderElementProps,
+ useSlateStatic,
+ useSelected,
+} from "slate-react"
+import { Katex } from "./Katex"
+import TextareaAutosize from "react-textarea-autosize"
+import cs from "classnames"
+import useClickOutside from "../../../../hooks/useClickOutside"
interface BlockKatexEditorProps {
slateAttributes?: RenderElementProps["attributes"]
slateElement: Slate.Element
}
-const _BlockKatexEditor = ({ slateElement }: PropsWithChildren) => {
- const refTextArea = useRef(null);
- const refContainer = useRef(null);
- const [isFocused, setIsFocused] = useState(false);
- const editor = useSlateStatic();
- const path = ReactEditor.findPath(editor, slateElement);
- const selected = useSelected();
+const _BlockKatexEditor = ({
+ slateElement,
+}: PropsWithChildren) => {
+ const refTextArea = useRef(null)
+ const refContainer = useRef(null)
+ const [isFocused, setIsFocused] = useState(false)
+ const editor = useSlateStatic()
+ const path = ReactEditor.findPath(editor, slateElement)
+ const selected = useSelected()
const handleClickKatex = useCallback(() => {
- if (isFocused) return;
- setIsFocused(true);
+ if (isFocused) return
+ setIsFocused(true)
if (refTextArea.current) {
- const end = refTextArea.current.value.length;
- refTextArea.current.setSelectionRange(end, end);
- refTextArea.current.focus();
+ const end = refTextArea.current.value.length
+ refTextArea.current.setSelectionRange(end, end)
+ refTextArea.current.focus()
}
}, [isFocused])
- const handleFocus = useCallback(() => setIsFocused(true), []);
- const handleChange = useCallback>((e) => {
- const newMath = e.target.value;
- Transforms.setNodes(editor, { math: newMath },{
- at: path
- })
- }, [editor, path])
- useClickOutside(refContainer, () => {
- setTimeout(() => {
- setIsFocused(false);
- }, 100)
- }, !isFocused)
-
+ const handleFocus = useCallback(() => setIsFocused(true), [])
+ const handleChange = useCallback<
+ React.ChangeEventHandler
+ >(
+ (e) => {
+ const newMath = e.target.value
+ Transforms.setNodes(
+ editor,
+ { math: newMath },
+ {
+ at: path,
+ }
+ )
+ },
+ [editor, path]
+ )
+ useClickOutside(
+ refContainer,
+ () => {
+ setTimeout(() => {
+ setIsFocused(false)
+ }, 100)
+ },
+ !isFocused
+ )
+
useEffect(() => {
if (selected && refTextArea.current) {
- const end = refTextArea.current.value.length;
- refTextArea.current.setSelectionRange(end, end);
- refTextArea.current.focus();
+ const end = refTextArea.current.value.length
+ refTextArea.current.setSelectionRange(end, end)
+ refTextArea.current.focus()
}
}, [selected])
-
- const { math } = slateElement;
+ const { math } = slateElement
return (
- {math &&
+ {math && (
- );
-};
+ )
+}
-export const BlockKatexEditor = memo(_BlockKatexEditor);
+export const BlockKatexEditor = memo(_BlockKatexEditor)
diff --git a/src/components/NFTArticle/elements/Math/Katex.tsx b/src/components/NFTArticle/elements/Math/Katex.tsx
index f8ceb9f74..ccbc415f5 100644
--- a/src/components/NFTArticle/elements/Math/Katex.tsx
+++ b/src/components/NFTArticle/elements/Math/Katex.tsx
@@ -1,5 +1,5 @@
-import React, { memo, useMemo } from 'react'
-import KaTeX from 'katex'
+import React, { memo, useMemo } from "react"
+import KaTeX from "katex"
import style from "./BlockKatex.module.scss"
import cs from "classnames"
@@ -13,16 +13,16 @@ const _Katex = ({ children, inline }: KatexProps) => {
const generatedHtml = KaTeX.renderToString(children, {
displayMode: !inline,
throwOnError: false,
- });
- return { __html: generatedHtml };
- }, [children, inline]);
+ })
+ return { __html: generatedHtml }
+ }, [children, inline])
return (
- );
-};
+ )
+}
-export const Katex = memo(_Katex);
+export const Katex = memo(_Katex)
diff --git a/src/components/NFTArticle/elements/Math/MathDefinition.tsx b/src/components/NFTArticle/elements/Math/MathDefinition.tsx
index ef232da3e..72dc4836f 100644
--- a/src/components/NFTArticle/elements/Math/MathDefinition.tsx
+++ b/src/components/NFTArticle/elements/Math/MathDefinition.tsx
@@ -1,34 +1,34 @@
-import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition";
-import style from "../../NFTArticle.module.scss";
-import { BlockKatexEditor } from "./BlockKatexEditor";
+import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition"
+import style from "../../NFTArticle.module.scss"
+import { BlockKatexEditor } from "./BlockKatexEditor"
export const mathDefinition: IArticleBlockDefinition
+ >
- );
-});
-EmbedYoutube.displayName = 'EmbedYoutube';
+ )
+})
+EmbedYoutube.displayName = "EmbedYoutube"
-export default EmbedYoutube;
+export default EmbedYoutube
diff --git a/src/components/NFTArticle/elements/Figure/FigcaptionEditor.tsx b/src/components/NFTArticle/elements/Figure/FigcaptionEditor.tsx
index 6577d186a..d6e7b19ad 100644
--- a/src/components/NFTArticle/elements/Figure/FigcaptionEditor.tsx
+++ b/src/components/NFTArticle/elements/Figure/FigcaptionEditor.tsx
@@ -15,9 +15,12 @@ export function FigcaptionElement({
const text = element.children[0].text
return (
-
Image caption...
diff --git a/src/components/NFTArticle/elements/Figure/FigureDefinition.tsx b/src/components/NFTArticle/elements/Figure/FigureDefinition.tsx
index 613fe72d9..0dd32c815 100644
--- a/src/components/NFTArticle/elements/Figure/FigureDefinition.tsx
+++ b/src/components/NFTArticle/elements/Figure/FigureDefinition.tsx
@@ -1,26 +1,30 @@
-import { FigureElement } from "./FigureEditor";
-import { ImageAttributeSettings } from "../Image/ImageAttributeSettings";
-import { BlockParamsModal } from "../../SlateEditor/UI/BlockParamsModal";
-import { Node, Transforms } from "slate";
-import { IArticleBlockDefinition, TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition";
-import { FigcaptionElement } from "./FigcaptionEditor";
-import { VideoAttributeSettings } from "../Video/VideoAttributeSettings";
+import { FigureElement } from "./FigureEditor"
+import { ImageAttributeSettings } from "../Image/ImageAttributeSettings"
+import { BlockParamsModal } from "../../SlateEditor/UI/BlockParamsModal"
+import { Node, Transforms } from "slate"
+import {
+ IArticleBlockDefinition,
+ TEditAttributeComp,
+} from "../../../../types/ArticleEditor/BlockDefinition"
+import { FigcaptionElement } from "./FigcaptionEditor"
+import { VideoAttributeSettings } from "../Video/VideoAttributeSettings"
-const medias = ["image", "video"];
+const medias = ["image", "video"]
const mediaAttributeSettings: Record = {
- "image": ImageAttributeSettings,
- "video": VideoAttributeSettings,
+ image: ImageAttributeSettings,
+ video: VideoAttributeSettings,
}
export const figureDefinition: IArticleBlockDefinition = {
name: "Figure",
icon: null,
render: FigureElement,
hasUtilityWrapper: true,
+ hasDeleteBehaviorRemoveBlock: true,
editAttributeComp: ({ element, onEdit }) => {
const children = Node.elements(element)
for (const [child] of children) {
if (medias.indexOf(child.type) > -1) {
- const AttributeSettings = mediaAttributeSettings[child.type];
+ const AttributeSettings = mediaAttributeSettings[child.type]
return = {
for (const [child, childPath] of children) {
if (medias.indexOf(child.type) > -1) {
Transforms.setNodes(editor, update, {
- at: path.concat(childPath)
+ at: path.concat(childPath),
})
return
}
diff --git a/src/components/NFTArticle/elements/Figure/FigureEditor.tsx b/src/components/NFTArticle/elements/Figure/FigureEditor.tsx
index 5315d6c78..96158db56 100644
--- a/src/components/NFTArticle/elements/Figure/FigureEditor.tsx
+++ b/src/components/NFTArticle/elements/Figure/FigureEditor.tsx
@@ -3,7 +3,6 @@ import { useSelected } from "slate-react"
import style from "./FigureEditor.module.scss"
import cs from "classnames"
-
interface Props {
attributes: any
element: any
@@ -16,11 +15,13 @@ export function FigureElement({
const selected = useSelected()
return (
-
+
{children}
)
}
-
diff --git a/src/components/NFTArticle/elements/Figure/FigureProcessor.ts b/src/components/NFTArticle/elements/Figure/FigureProcessor.ts
index f5189de2a..06f2045ca 100644
--- a/src/components/NFTArticle/elements/Figure/FigureProcessor.ts
+++ b/src/components/NFTArticle/elements/Figure/FigureProcessor.ts
@@ -1,17 +1,16 @@
-import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor";
-import { Node } from "slate";
-import { convertSlateLeafDirectiveToMarkdown } from "../../processor/getMarkdownFromSlateEditorState";
-
+import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor"
+import { Node } from "slate"
+import { convertSlateLeafDirectiveToMarkdown } from "../../processor/getMarkdownFromSlateEditorState"
const createMarkdownImageFromFigure = (nodeFigure: Node, nodeImage: Node) => {
// create a regular image node
const imageNode: any = {
type: "image",
- url: nodeImage.url
+ url: nodeImage.url,
}
// find if there's a caption
- const caption: Node|null = nodeFigure.children.find(
+ const caption: Node | null = nodeFigure.children.find(
(node: Node) => node.type === ("figcaption" as any)
)
if (caption && caption.children?.length > 0) {
@@ -22,10 +21,10 @@ const createMarkdownImageFromFigure = (nodeFigure: Node, nodeImage: Node) => {
const createMarkdownVideoFromFigure = (nodeFigure: Node, nodeVideo: Node) => {
const videoNode: Node = {
- type: 'video',
- src: nodeVideo.src
+ type: "video",
+ src: nodeVideo.src,
}
- const caption: Node|null = nodeFigure.children.find(
+ const caption: Node | null = nodeFigure.children.find(
(node: Node) => node.type === ("figcaption" as any)
)
if (caption && caption.children?.length > 0) {
@@ -33,9 +32,12 @@ const createMarkdownVideoFromFigure = (nodeFigure: Node, nodeVideo: Node) => {
}
return convertSlateLeafDirectiveToMarkdown(videoNode)
}
-const mediasConvert: Record any> = {
- "image": createMarkdownImageFromFigure,
- "video": createMarkdownVideoFromFigure
+const mediasConvert: Record<
+ string,
+ (nodeFigure: Node, nodeMedia: Node) => any
+> = {
+ image: createMarkdownImageFromFigure,
+ video: createMarkdownVideoFromFigure,
}
export const figureProcessor: IArticleElementProcessor = {
@@ -44,9 +46,9 @@ export const figureProcessor: IArticleElementProcessor = {
* in proper markdown
*/
transformSlateToMarkdownMdhast: (node) => {
- const mediaNode: Node|null = node.children.find(
+ const mediaNode: Node | null = node.children.find(
(node: Node) => ["image", "video"].indexOf(node.type) > -1
)
- return mediasConvert[mediaNode.type](node, mediaNode);
- }
+ return mediasConvert[mediaNode.type](node, mediaNode)
+ },
}
diff --git a/src/components/NFTArticle/elements/Heading/HeadingAttributeSettings.tsx b/src/components/NFTArticle/elements/Heading/HeadingAttributeSettings.tsx
index 60ed4a15c..1c04b247e 100644
--- a/src/components/NFTArticle/elements/Heading/HeadingAttributeSettings.tsx
+++ b/src/components/NFTArticle/elements/Heading/HeadingAttributeSettings.tsx
@@ -1,6 +1,6 @@
import cs from "classnames"
import { ContextualMenuItems } from "../../../Menus/ContextualMenuItems"
-import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition";
+import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition"
export const HeadingAttributeSettings: TEditAttributeComp = ({
element,
@@ -12,15 +12,17 @@ export const HeadingAttributeSettings: TEditAttributeComp = ({
))}
diff --git a/src/components/NFTArticle/elements/Heading/HeadingDefinition.tsx b/src/components/NFTArticle/elements/Heading/HeadingDefinition.tsx
index 5ee2508c5..62029b18c 100644
--- a/src/components/NFTArticle/elements/Heading/HeadingDefinition.tsx
+++ b/src/components/NFTArticle/elements/Heading/HeadingDefinition.tsx
@@ -1,27 +1,27 @@
-import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition";
-import { EBreakBehavior } from "../../SlateEditor/Plugins/SlateBreaksPlugin";
-import { HeadingAttributeSettings } from "./HeadingAttributeSettings";
+import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition"
+import { EBreakBehavior } from "../../SlateEditor/Plugins/SlateBreaksPlugin"
+import { HeadingAttributeSettings } from "./HeadingAttributeSettings"
export const headingDefinition: IArticleBlockDefinition = {
name: "Heading",
- icon: ,
+ icon: ,
buttonInstantiable: true,
render: ({ attributes, element, children }) => {
switch (element.depth) {
case 1:
- return = {
instanciateElement: () => ({
type: "heading",
depth: 1,
- children: [{
- text: ""
- }]
+ children: [
+ {
+ text: "",
+ },
+ ],
}),
editAttributeComp: HeadingAttributeSettings,
-};
+}
diff --git a/src/components/NFTArticle/elements/Image/ImageAttributeSettings.tsx b/src/components/NFTArticle/elements/Image/ImageAttributeSettings.tsx
index 232fa2ab7..9c320158c 100644
--- a/src/components/NFTArticle/elements/Image/ImageAttributeSettings.tsx
+++ b/src/components/NFTArticle/elements/Image/ImageAttributeSettings.tsx
@@ -8,15 +8,15 @@ import { useCallback, useState } from "react"
import { Field } from "../../../Form/Field"
import { Submit } from "../../../Form/Submit"
import { Button } from "../../../Button"
-import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition";
+import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition"
const tabs: TabDefinition[] = [
{
- name: "Upload"
+ name: "Upload",
},
{
- name: "External link"
- }
+ name: "External link",
+ },
]
export const ImageAttributeSettings: TEditAttributeComp = ({
@@ -28,13 +28,13 @@ export const ImageAttributeSettings: TEditAttributeComp = ({
const onAddFile = (file: File) => {
if (file) {
onEdit({
- url: URL.createObjectURL(file)
+ url: URL.createObjectURL(file),
})
}
}
const handleClickImport = useCallback(() => {
onEdit({
- url: textUrl
+ url: textUrl,
})
}, [onEdit, textUrl])
@@ -48,35 +48,29 @@ export const ImageAttributeSettings: TEditAttributeComp = ({
= {
name: "Image",
- icon: ,
+ icon: ,
buttonInstantiable: true,
render: ImageEditor,
hasUtilityWrapper: false,
- instanciateElement: (opts = { url: '', caption: '' }) => ({
+ instanciateElement: (opts = { url: "", caption: "" }) => ({
type: "figure",
- children: [{
- type: "image",
- url: opts.url, // if "", will display the "add image" component
- children: [{
- text: ""
- }]
- }, {
- type: "figcaption",
- children: [{
- text: opts.caption
- }]
- }]
+ children: [
+ {
+ type: "image",
+ url: opts.url, // if "", will display the "add image" component
+ children: [
+ {
+ text: "",
+ },
+ ],
+ },
+ {
+ type: "figcaption",
+ children: [
+ {
+ text: opts.caption,
+ },
+ ],
+ },
+ ],
}),
}
diff --git a/src/components/NFTArticle/elements/Image/ImageDisplay.tsx b/src/components/NFTArticle/elements/Image/ImageDisplay.tsx
index 17a57ab0f..c6470c92f 100644
--- a/src/components/NFTArticle/elements/Image/ImageDisplay.tsx
+++ b/src/components/NFTArticle/elements/Image/ImageDisplay.tsx
@@ -4,20 +4,11 @@ interface Props {
src: string
alt: string
}
-export function ImageDisplay({
- src,
- alt,
-}: Props) {
+export function ImageDisplay({ src, alt }: Props) {
return (
-
- {alt}
-
- )}
+ {alt} }
)
}
diff --git a/src/components/NFTArticle/elements/Image/ImageEditor.tsx b/src/components/NFTArticle/elements/Image/ImageEditor.tsx
index 8b53aa5d9..7465ca046 100644
--- a/src/components/NFTArticle/elements/Image/ImageEditor.tsx
+++ b/src/components/NFTArticle/elements/Image/ImageEditor.tsx
@@ -25,7 +25,7 @@ export function ImageEditor({
const setImage = (element: any) => {
Transforms.setNodes(editor, element, {
- at: path
+ at: path,
})
}
@@ -35,10 +35,8 @@ export function ImageEditor({
{children}
{showAddImage && (
- {children}
; + return{children}
case 2: - return{children}
; + return{children}
case 3: - return{children}
; + return{children}
case 4: - return{children}
; + return{children}
case 5: - return{children}
; + return{children}
case 6: - return{children}
; + return{children}
default: - break; + break } }, insertBreakBehavior: EBreakBehavior.insertParagraph, @@ -29,9 +29,11 @@ export const headingDefinition: IArticleBlockDefinition
{tabIndex === 0 ? (
files && files[0] && onAddFile(files[0])}
+ onChange={(files) => files && files[0] && onAddFile(files[0])}
accepted={["image/jpeg", "image/png", "image/gif"]}
className={cs(style.dropzone)}
- textDefault={(
+ textDefault={
)}
diff --git a/src/components/NFTArticle/elements/Image/ImageDefinition.tsx b/src/components/NFTArticle/elements/Image/ImageDefinition.tsx
index 6bc8ea89d..9f4ed7949 100644
--- a/src/components/NFTArticle/elements/Image/ImageDefinition.tsx
+++ b/src/components/NFTArticle/elements/Image/ImageDefinition.tsx
@@ -1,5 +1,5 @@
-import { ImageEditor } from "./ImageEditor";
-import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition";
+import { ImageEditor } from "./ImageEditor"
+import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition"
interface InstanciateImageOpts {
url?: string
@@ -7,23 +7,30 @@ interface InstanciateImageOpts {
}
export const imageDefinition: IArticleBlockDefinition
-
-
- Import an image
-
+
+ Import an image (20mb max)
- )}
- textDrag={(
+ }
+ textDrag={
-
- Drop image file
-
+ Drop image file
- )}
+ }
/>
- ):tabIndex === 1 ? (
-
- ):null}
+ ) : null}
{hasUrl ? (
-
- {children}
- {children}
+ [style.container_katex_margin]: isFocused,
+ })}
+ >
{math}
- }
+ )}
{children}
-
+
),
hasUtilityWrapper: true,
instanciateElement: () => ({
type: "math",
math: "",
- children: [{
- text: ""
- }]
- })
+ children: [
+ {
+ text: "",
+ },
+ ],
+ }),
}
export const inlineMathDefinition: IArticleBlockDefinition
+
,
+ document.body
+ )
+ : null
+ }
+)
+FloatingMentionMenu.displayName = "FloatingMentionMenu"
diff --git a/src/components/NFTArticle/elements/Mention/MentionDefinition.tsx b/src/components/NFTArticle/elements/Mention/MentionDefinition.tsx
new file mode 100644
index 000000000..d3eeba2ee
--- /dev/null
+++ b/src/components/NFTArticle/elements/Mention/MentionDefinition.tsx
@@ -0,0 +1,19 @@
+import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition"
+import { MentionEditor } from "./MentionEditor"
+
+interface InstanciateMentionOpts {
+ tzAddress?: string
+}
+export const mentionDefinition: IArticleBlockDefinition{children}
@@ -10,8 +10,10 @@ export const paragraphDefinition: IArticleBlockDefinition
- {alignments.map((alignment) =>
+ {alignments.map((alignment) => (
- )}
- {cols > 1 &&
+ ))}
+ {cols > 1 && (
Col
- }
- {rows > 1 &&
+ )}
+ {rows > 1 && (
Row
- }
+ )}
- );
-};
+ )
+}
-export const TableColToolbar = memo(_TableColToolbar);
+export const TableColToolbar = memo(_TableColToolbar)
diff --git a/src/components/NFTArticle/elements/Table/TableDefinition.tsx b/src/components/NFTArticle/elements/Table/TableDefinition.tsx
index d63795bdd..d7d67285d 100644
--- a/src/components/NFTArticle/elements/Table/TableDefinition.tsx
+++ b/src/components/NFTArticle/elements/Table/TableDefinition.tsx
@@ -1,11 +1,11 @@
-import { TableEditor } from "./TableEditor";
-import { SlateTable } from "../../SlateEditor/Plugins/SlateTablePlugin";
-import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition";
-import { TableCellEditor } from "./TableCellEditor";
+import { TableEditor } from "./TableEditor"
+import { SlateTable } from "../../SlateEditor/Plugins/SlateTablePlugin"
+import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition"
+import { TableCellEditor } from "./TableCellEditor"
export const tableDefinition: IArticleBlockDefinition
+
-
- {head}
-
-
- {body}
-
+ {head}
+ {body}
- {selectedPos &&
+ {selectedPos && (
<>
{
+export interface TezosStorageProps
+ extends PropsWithChildren {
element: any
}
-const TezosStorageEditor = forwardRef(({
- contract,
- path,
- storage_type,
- data_spec,
- value_path,
- element,
- children,
-}, ref) => {
- const editor = useSlateStatic()
- const nodePath = ReactEditor.findPath(editor, element)
+const TezosStorageEditor = forwardRef(
+ (
+ { contract, path, storage_type, data_spec, value_path, element, children },
+ ref
+ ) => {
+ const editor = useSlateStatic()
+ const nodePath = ReactEditor.findPath(editor, element)
- const [showModal, setShowModal] = useState(false)
+ const [showModal, setShowModal] = useState(false)
- // if there is no contract, the block isn't valid
- const empty = !contract
+ // if there is no contract, the block isn't valid
+ const empty = !contract
- // update the element with new values
- const update = useCallback((element: any) => {
- Transforms.setNodes(editor, element, {
- at: nodePath
- })
- }, [nodePath, element])
+ // update the element with new values
+ const update = useCallback(
+ (element: any) => {
+ Transforms.setNodes(editor, element, {
+ at: nodePath,
+ })
+ },
+ [nodePath, element]
+ )
- return (
-
-
)
}
diff --git a/src/components/NFTArticle/elements/TezosStorage/TezosStorageEditor.tsx b/src/components/NFTArticle/elements/TezosStorage/TezosStorageEditor.tsx
index 53f4f8729..ed9a0f18b 100644
--- a/src/components/NFTArticle/elements/TezosStorage/TezosStorageEditor.tsx
+++ b/src/components/NFTArticle/elements/TezosStorage/TezosStorageEditor.tsx
@@ -9,81 +9,76 @@ import { Transforms } from "slate"
import { BlockParamsModal } from "../../SlateEditor/UI/BlockParamsModal"
import { TezosStorageDisplay } from "./TezosStorageDisplay"
-export interface TezosStorageProps extends PropsWithChildren
- = ({
- id,
-}) => {
+export const TezosStorageGentk: TezosStorageRenderer = ({ id }) => {
const [running, setRunning] = useState(false)
const { data } = useQuery(Qu_objkt, {
variables: {
- id: id
- }
+ id: id,
+ },
})
- const token = useMemo(() => {
+ const token = useMemo(() => {
return data?.objkt || null
}, [data])
@@ -44,7 +42,7 @@ export const TezosStorageGentk: TezosStorageRenderer = ({
}
return (
-
- {empty ? (
-
- ):(
-
+ return (
+
+ setShowModal(false)}
- >
- {
- update(element)
- setShowModal(false)
- }}
- />
-
- )}
-
- )
-})
+ )
+ }
+)
-TezosStorageEditor.displayName = 'TezosStorage'
+TezosStorageEditor.displayName = "TezosStorage"
export default TezosStorageEditor
diff --git a/src/components/NFTArticle/elements/TezosStorage/TezosStorageFactory.ts b/src/components/NFTArticle/elements/TezosStorage/TezosStorageFactory.ts
index 27b3b98a9..62afe2d2a 100644
--- a/src/components/NFTArticle/elements/TezosStorage/TezosStorageFactory.ts
+++ b/src/components/NFTArticle/elements/TezosStorage/TezosStorageFactory.ts
@@ -36,4 +36,4 @@ export function TezosStorageFactory(
}
}
return TezosStorageUnknown
-}
\ No newline at end of file
+}
diff --git a/src/components/NFTArticle/elements/TezosStorage/TezosStorageGentk.module.scss b/src/components/NFTArticle/elements/TezosStorage/TezosStorageGentk.module.scss
index a8ef8861f..1f182b94c 100644
--- a/src/components/NFTArticle/elements/TezosStorage/TezosStorageGentk.module.scss
+++ b/src/components/NFTArticle/elements/TezosStorage/TezosStorageGentk.module.scss
@@ -1,3 +1,9 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
.header {
display: flex;
flex-direction: row;
@@ -13,4 +19,4 @@
.user {
font-size: var(--font-size-small);
}
-}
\ No newline at end of file
+}
diff --git a/src/components/NFTArticle/elements/TezosStorage/TezosStorageGentk.tsx b/src/components/NFTArticle/elements/TezosStorage/TezosStorageGentk.tsx
index 954524adc..ffd7ac9e8 100644
--- a/src/components/NFTArticle/elements/TezosStorage/TezosStorageGentk.tsx
+++ b/src/components/NFTArticle/elements/TezosStorage/TezosStorageGentk.tsx
@@ -21,18 +21,16 @@ import { gentkLiveUrl } from "../../../../utils/objkt"
interface Props {
id: number
}
-export const TezosStorageGentk: TezosStorageRenderer
+ {empty ? (
+
+ ) : (
+
- {showModal && (
-
- {children}
+ {showModal && (
+ setShowModal(false)}>
+ {
+ update(element)
+ setShowModal(false)
+ }}
+ />
+
+ )}
+
- {children}
+
{token && (
@@ -70,22 +68,16 @@ export const TezosStorageGentk: TezosStorageRenderer = ({
url={gentkLiveUrl(token)}
hasLoading={false}
/>
- ):(
-
+ ) : (
+
loading token
)}
-
{token && (
{
TezosStorageProject.getPropsFromPointer = (pointer) => {
return {
- id: parseInt(pointer.path.split("::")[1])
+ id: parseInt(pointer.path.split("::")[1]),
}
-}
\ No newline at end of file
+}
diff --git a/src/components/NFTArticle/elements/TezosStorage/TezosStorageSettings.tsx b/src/components/NFTArticle/elements/TezosStorage/TezosStorageSettings.tsx
index a6ecd106d..bae81296c 100644
--- a/src/components/NFTArticle/elements/TezosStorage/TezosStorageSettings.tsx
+++ b/src/components/NFTArticle/elements/TezosStorage/TezosStorageSettings.tsx
@@ -4,11 +4,17 @@ import cs from "classnames"
import { Submit } from "../../../Form/Submit"
import { Button } from "../../../Button"
import { Field } from "../../../Form/Field"
-import { InputReactiveSearch, InputReactSearchResultsRendererProps } from "../../../Input/InputReactiveSearch"
+import {
+ InputReactiveSearch,
+ InputReactSearchResultsRendererProps,
+} from "../../../Input/InputReactiveSearch"
import { GenerativeToken } from "../../../../types/entities/GenerativeToken"
import { Fragment, useCallback, useMemo, useState } from "react"
import { useApolloClient, useQuery } from "@apollo/client"
-import { Qu_genTokenAllIterations, Qu_searchGenTok } from "../../../../queries/generative-token"
+import {
+ Qu_genTokenAllIterations,
+ Qu_searchGenTok,
+} from "../../../../queries/generative-token"
import { ipfsGatewayUrl } from "../../../../services/Ipfs"
import { EntityBadge } from "../../../User/EntityBadge"
import { Spacing } from "../../../Layout/Spacing"
@@ -16,9 +22,11 @@ import { ModalTitle } from "../../SlateEditor/UI/ModalTitle"
import { Objkt } from "../../../../types/entities/Objkt"
import { LoaderBlock } from "../../../Layout/LoaderBlock"
import { ImageIpfs } from "../../../Medias/ImageIpfs"
-import { generativeTokenTezosStoragePointer, gentkTezosStoragePointer } from "../../../../utils/tezos-storage"
-import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition";
-
+import {
+ generativeTokenTezosStoragePointer,
+ gentkTezosStoragePointer,
+} from "../../../../utils/tezos-storage"
+import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition"
export const TezosStorageSettings: TEditAttributeComp = ({
element,
@@ -26,9 +34,9 @@ export const TezosStorageSettings: TEditAttributeComp = ({
children,
}) => {
// the selected project
- const [project, setProject] = useState(null)
+ const [project, setProject] = useState(null)
// the selected iteration
- const [iteration, setIteration] = useState(null)
+ const [iteration, setIteration] = useState(null)
// clears the selection -> state of iteration & project
const clearSelection = useCallback(() => {
@@ -39,73 +47,66 @@ export const TezosStorageSettings: TEditAttributeComp = ({
const importSelection = useCallback(() => {
if (iteration) {
onEdit(gentkTezosStoragePointer(iteration))
- }
- else if (project) {
+ } else if (project) {
onEdit(generativeTokenTezosStoragePointer(project))
}
}, [onEdit, project, iteration])
return (
{!running ? (
@@ -93,19 +85,19 @@ export const TezosStorageGentk: TezosStorageRenderer = ({
type="button"
size="small"
color="transparent"
- iconComp={}
+ iconComp={}
iconSide="right"
onClick={() => setRunning(true)}
>
run
- ):(
+ ) : (
<>
}
+ iconComp={}
iconSide="right"
onClick={() => setRunning(false)}
>
@@ -114,7 +106,7 @@ export const TezosStorageGentk: TezosStorageRenderer = ({
}
+ iconComp={}
iconSide="right"
onClick={reload}
color="transparent"
@@ -128,7 +120,7 @@ export const TezosStorageGentk: TezosStorageRenderer = ({
isLink={true}
size="small"
iconComp={
-
+
}
// @ts-ignore
target="_blank"
@@ -147,10 +139,9 @@ export const TezosStorageGentk: TezosStorageRenderer = ({
TezosStorageGentk.matches = (pointer) => {
// get contract address, removing network indentifier if any
const contract = pointer.contract.split(".")[0]
- if (![
- FxhashContracts.GENTK_V1,
- FxhashContracts.GENTK_V2,
- ].includes(contract)) {
+ if (
+ ![FxhashContracts.GENTK_V1, FxhashContracts.GENTK_V2].includes(contract)
+ ) {
return false
}
const split = pointer.path.split("::")
@@ -165,6 +156,6 @@ TezosStorageGentk.matches = (pointer) => {
TezosStorageGentk.getPropsFromPointer = (pointer) => {
return {
- id: parseInt(pointer.path.split("::")[1])
+ id: parseInt(pointer.path.split("::")[1]),
}
-}
\ No newline at end of file
+}
diff --git a/src/components/NFTArticle/elements/TezosStorage/TezosStorageProcessor.ts b/src/components/NFTArticle/elements/TezosStorage/TezosStorageProcessor.ts
index 639e71b13..9e2ee6d2e 100644
--- a/src/components/NFTArticle/elements/TezosStorage/TezosStorageProcessor.ts
+++ b/src/components/NFTArticle/elements/TezosStorage/TezosStorageProcessor.ts
@@ -1,5 +1,8 @@
-import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor";
-import { ITezosStoragePointer, OptionalTezosStoragePointerKeys } from "../../../../types/TezosStorage";
+import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor"
+import {
+ ITezosStoragePointer,
+ OptionalTezosStoragePointerKeys,
+} from "../../../../types/TezosStorage"
export const tezosStorageProcessor: IArticleElementProcessor = {
transformMdhastToComponent: (node, properties) => {
@@ -13,5 +16,5 @@ export const tezosStorageProcessor: IArticleElementProcessor = {
}
}
return props as any
- }
+ },
}
diff --git a/src/components/NFTArticle/elements/TezosStorage/TezosStorageProject.tsx b/src/components/NFTArticle/elements/TezosStorage/TezosStorageProject.tsx
index fe8e03554..dd868226f 100644
--- a/src/components/NFTArticle/elements/TezosStorage/TezosStorageProject.tsx
+++ b/src/components/NFTArticle/elements/TezosStorage/TezosStorageProject.tsx
@@ -17,18 +17,16 @@ import { GenerativeArtwork } from "../../../GenerativeToken/GenerativeArtwork"
interface Props {
id: number
}
-export const TezosStorageProject: TezosStorageRenderer = ({
- id,
-}) => {
+export const TezosStorageProject: TezosStorageRenderer = ({ id }) => {
const [running, setRunning] = useState(false)
const { data } = useQuery(Qu_genToken, {
variables: {
- id: id
- }
+ id: id,
+ },
})
- const token = useMemo(() => {
+ const token = useMemo(() => {
return data?.generativeToken || null
}, [data])
@@ -57,7 +55,7 @@ export const TezosStorageProject: TezosStorageRenderer = ({
/>
)}
-
+
{token && (
-
- Insert fxhash content
-
+ Insert fxhash content
- You can first select a project, and then insert the project itself or pick a particular iteration of the project. + You can first select a project, and then insert the project itself or + pick a particular iteration of the project.
-
-
+
{project && (
-
+
)}
{project && (
<>
- = ({
return (
Selected project
-
-
+ (() => {
@@ -307,25 +294,20 @@ function ProjectIterationPicker({
key={item.id}
type="button"
className={cs(style.iteration, {
- [style.selected]: selected?.id === item.id
+ [style.selected]: selected?.id === item.id,
})}
onClick={() => onChange(selected?.id === item.id ? null : item)}
>
-
)
diff --git a/src/components/NFTArticle/elements/TezosStorage/TezosStorageUnknown.tsx b/src/components/NFTArticle/elements/TezosStorage/TezosStorageUnknown.tsx
index ba2f8be44..c2dcc4a7d 100644
--- a/src/components/NFTArticle/elements/TezosStorage/TezosStorageUnknown.tsx
+++ b/src/components/NFTArticle/elements/TezosStorage/TezosStorageUnknown.tsx
@@ -22,7 +22,7 @@ export const TezosStorageUnknown: TezosStorageRenderer
{iteration
? "Iteration selected"
- : "You can select an iteration"
- }
+ : "You can select an iteration"}
{iteration && (
-
@@ -145,11 +146,9 @@ function ProjectsReactiveSearchResultsRenderer({
return (
{results?.map((token) => (
-
+
{children?.({
- item: token
+ item: token,
})}
))}
@@ -157,7 +156,6 @@ function ProjectsReactiveSearchResultsRenderer({
)
}
-
/**
* The component to quickly search and explore projects, with a list to display
* the projects.
@@ -165,9 +163,7 @@ function ProjectsReactiveSearchResultsRenderer({
interface IImportCompProps {
onChange: (project: GenerativeToken) => void
}
-function TezosStorageLoadProject({
- onChange,
-}: IImportCompProps) {
+function TezosStorageLoadProject({ onChange }: IImportCompProps) {
const client = useApolloClient()
const [value, setValue] = useState("")
@@ -182,21 +178,21 @@ function TezosStorageLoadProject({
searchQuery_eq: search,
},
sort: {
- relevance: "DESC"
- }
- }
+ relevance: "DESC",
+ },
+ },
})
}
const resultsIntoGenToks = (results: any): GenerativeToken[] => {
- if (!results || ! results.data || !results.data.generativeTokens) {
+ if (!results || !results.data || !results.data.generativeTokens) {
return []
}
return results.data.generativeTokens
}
const valueFromToken = (token: GenerativeToken) => {
- return ""+token.id
+ return "" + token.id
}
// update the value and clear the selection
@@ -225,9 +221,7 @@ function TezosStorageLoadProject({
onChange(item)
}}
>
- ![]()
#{project.id} {project.name}
-
+
- ):(
-
-
#{item.iteration}
))}
-
+
unsupported tezos storage content
{keys.map((key) => (
@@ -38,4 +38,4 @@ export const TezosStorageUnknown: TezosStorageRenderer = ({
// fallback, always matches
TezosStorageUnknown.matches = () => true
// no props
-TezosStorageUnknown.getPropsFromPointer = pointer => ({ pointer })
\ No newline at end of file
+TezosStorageUnknown.getPropsFromPointer = (pointer) => ({ pointer })
diff --git a/src/components/NFTArticle/elements/ThematicBreak/ThematicBreakDefinition.tsx b/src/components/NFTArticle/elements/ThematicBreak/ThematicBreakDefinition.tsx
index 8bbc4ecf6..eeec0495e 100644
--- a/src/components/NFTArticle/elements/ThematicBreak/ThematicBreakDefinition.tsx
+++ b/src/components/NFTArticle/elements/ThematicBreak/ThematicBreakDefinition.tsx
@@ -1,5 +1,5 @@
-import { ThematicBreakEditor } from "./ThematicBreakEditor";
-import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition";
+import { ThematicBreakEditor } from "./ThematicBreakEditor"
+import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition"
export const thematicBreakDefinition: IArticleBlockDefinition = {
name: "Horizontal break",
@@ -7,9 +7,11 @@ export const thematicBreakDefinition: IArticleBlockDefinition = {
render: ThematicBreakEditor,
instanciateElement: () => ({
type: "thematicBreak",
- children: [{
- text: ""
- }],
+ children: [
+ {
+ text: "",
+ },
+ ],
}),
buttonInstantiable: true,
hasUtilityWrapper: true,
diff --git a/src/components/NFTArticle/elements/ThematicBreak/ThematicBreakEditor.tsx b/src/components/NFTArticle/elements/ThematicBreak/ThematicBreakEditor.tsx
index be2b5b87d..9d5cc0324 100644
--- a/src/components/NFTArticle/elements/ThematicBreak/ThematicBreakEditor.tsx
+++ b/src/components/NFTArticle/elements/ThematicBreak/ThematicBreakEditor.tsx
@@ -13,11 +13,15 @@ export function ThematicBreakEditor({
children,
}: PropsWithChildren) {
return (
-
-
+
)}
)
-});
+})
-VideoEditor.displayName = 'VideoElement';
+VideoEditor.displayName = "VideoElement"
diff --git a/src/components/NFTArticle/elements/Video/VideoProcessor.ts b/src/components/NFTArticle/elements/Video/VideoProcessor.ts
index 1027fb966..8ea1ffe1f 100644
--- a/src/components/NFTArticle/elements/Video/VideoProcessor.ts
+++ b/src/components/NFTArticle/elements/Video/VideoProcessor.ts
@@ -1,24 +1,29 @@
-import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor";
+import { IArticleElementProcessor } from "../../../../types/ArticleEditor/Processor"
export const videoProcessor: IArticleElementProcessor = {
transformMdhastToComponent: (node, properties) => {
- return ({
- src: properties.src || '',
- })
+ return {
+ src: properties.src || "",
+ }
},
transformMarkdownMdhastToSlate: (node) => {
- return ({
+ return {
type: "figure",
- children: [{
- type: "video",
- src: node.src || '',
- children: [{
- text: ""
- }],
- }, {
- type: "figcaption",
- children: node.children,
- }]
- });
- }
+ children: [
+ {
+ type: "video",
+ src: node.src || "",
+ children: [
+ {
+ text: "",
+ },
+ ],
+ },
+ {
+ type: "figcaption",
+ children: node.children,
+ },
+ ],
+ }
+ },
}
diff --git a/src/components/NFTArticle/processor/getMarkdownFromSlateEditorState.ts b/src/components/NFTArticle/processor/getMarkdownFromSlateEditorState.ts
index a6703214e..57833265d 100644
--- a/src/components/NFTArticle/processor/getMarkdownFromSlateEditorState.ts
+++ b/src/components/NFTArticle/processor/getMarkdownFromSlateEditorState.ts
@@ -1,43 +1,42 @@
-import { Node } from "slate";
-import { unified } from "unified";
-import remarkMath from "remark-math";
-import remarkDirective from "remark-directive";
-import remarkUnwrapImages from "remark-unwrap-images";
-import { slateToRemark } from "remark-slate-transformer";
-import stringify from "remark-stringify";
-import { OverridedSlateBuilders } from "remark-slate-transformer/lib/transformers/slate-to-mdast";
-import { remarkFxHashCustom } from "./plugins";
-import remarkGfm from "remark-gfm";
-import { mathProcessor } from "../elements/Math/MathProcessor";
-import { figureProcessor } from "../elements/Figure/FigureProcessor";
+import { Node } from "slate"
+import { unified } from "unified"
+import remarkMath from "remark-math"
+import remarkDirective from "remark-directive"
+import remarkUnwrapImages from "remark-unwrap-images"
+import { slateToRemark } from "remark-slate-transformer"
+import stringify from "remark-stringify"
+import { OverridedSlateBuilders } from "remark-slate-transformer/lib/transformers/slate-to-mdast"
+import { remarkFxHashCustom } from "./plugins"
+import remarkGfm from "remark-gfm"
+import { mathProcessor } from "../elements/Math/MathProcessor"
+import { figureProcessor } from "../elements/Figure/FigureProcessor"
+import { mentionProcessor } from "../elements/Mention/MentionProcessor"
-export function convertSlateLeafDirectiveToMarkdown(
- node: any,
-) {
- const { children, type, ...attributes} = node
+export function convertSlateLeafDirectiveToMarkdown(node: any) {
+ const { children, type, ...attributes } = node
return {
- type: 'leafDirective',
+ type: "leafDirective",
name: type,
children: [
{
- type: 'text',
+ type: "text",
value: children[0].text,
- }
+ },
],
attributes,
}
}
-
const slateToRemarkTransformerOverrides: OverridedSlateBuilders = {
- 'tezos-storage-pointer': convertSlateLeafDirectiveToMarkdown,
- 'embed-media': convertSlateLeafDirectiveToMarkdown,
+ "tezos-storage-pointer": convertSlateLeafDirectiveToMarkdown,
+ "embed-media": convertSlateLeafDirectiveToMarkdown,
figure: figureProcessor.transformSlateToMarkdownMdhast!,
inlineMath: mathProcessor.transformSlateToMarkdownMdhast!,
math: mathProcessor.transformSlateToMarkdownMdhast!,
+ mention: mentionProcessor.transformSlateToMarkdownMdhast!,
}
-export default async function getMarkdownFromSlateEditorState(slate: Node[] ) {
+export default async function getMarkdownFromSlateEditorState(slate: Node[]) {
try {
const processor = unified()
.use(remarkMath)
@@ -48,7 +47,7 @@ export default async function getMarkdownFromSlateEditorState(slate: Node[] ) {
.use(slateToRemark, {
overrides: slateToRemarkTransformerOverrides,
})
- .use(stringify, { bulletOther: '-' })
+ .use(stringify, { bulletOther: "-" })
const ast = await processor.run({
type: "root",
children: slate,
@@ -80,17 +79,15 @@ export default async function getMarkdownFromSlateEditorState(slate: Node[] ) {
}
)
return `::tezos-storage-pointer[${alt}]{${replaced}}`
- }
- else {
+ } else {
return match
}
}
)
return directiveAttributesFixed
- }
- catch(e) {
+ } catch (e) {
console.error(e)
- return null;
+ return null
}
}
diff --git a/src/components/NFTArticle/processor/getNFTArticleComponentsFromMarkdown.ts b/src/components/NFTArticle/processor/getNFTArticleComponentsFromMarkdown.ts
index 6737de1ec..7306328c1 100644
--- a/src/components/NFTArticle/processor/getNFTArticleComponentsFromMarkdown.ts
+++ b/src/components/NFTArticle/processor/getNFTArticleComponentsFromMarkdown.ts
@@ -1,27 +1,36 @@
-import { createElement, Fragment } from "react";
-import Embed from "../elements/Embed/Embed";
-import matter from "gray-matter";
-import { unified } from "unified";
-import remarkParse from "remark-parse";
-import remarkMath from "remark-math";
-import remarkGfm from "remark-gfm";
-import remarkUnwrapImages from "remark-unwrap-images";
-import remarkDirective from "remark-directive";
-import remarkRehype from "remark-rehype";
-import rehypeKatex from "rehype-katex";
+import { createElement, Fragment } from "react"
+import Embed from "../elements/Embed/Embed"
+import matter from "gray-matter"
+import { unified } from "unified"
+import remarkParse from "remark-parse"
+import remarkMath from "remark-math"
+import remarkGfm from "remark-gfm"
+import remarkUnwrapImages from "remark-unwrap-images"
+import remarkDirective from "remark-directive"
+import remarkRehype from "remark-rehype"
+import rehypeKatex from "rehype-katex"
import rehypePrism from "rehype-prism"
-import rehypeFormat from "rehype-format";
-import rehypeStringify from "rehype-stringify";
-import rehypeReact from "rehype-react";
-import { Element } from "hast";
-import { ComponentsWithNodeOptions, ComponentsWithoutNodeOptions } from "rehype-react/lib/complex-types";
-import { SharedOptions } from "rehype-react/lib";
-import { mdastFlattenListItemParagraphs, remarkFxHashCustom } from "./plugins"
+import rehypeStringify from "rehype-stringify"
+import rehypeReact from "rehype-react"
+import { Element } from "hast"
+import {
+ ComponentsWithNodeOptions,
+ ComponentsWithoutNodeOptions,
+} from "rehype-react/lib/complex-types"
+import { SharedOptions } from "rehype-react/lib"
+import {
+ mdastFlattenListItemParagraphs,
+ mdastParseMentions,
+ remarkFxHashCustom,
+ remarkMentions,
+} from "./plugins"
import { TezosStorageDisplay } from "../elements/TezosStorage/TezosStorageDisplay"
-import { ImageDisplay } from "../elements/Image/ImageDisplay";
-import { CodeDisplay } from "../elements/Code/CodeDisplay";
-import { ThematicBreakEditor } from "../elements/ThematicBreak/ThematicBreakEditor";
-import { VideoDisplay } from "../elements/Video/VideoDisplay";
+import { ImageDisplay } from "../elements/Image/ImageDisplay"
+import { CodeDisplay } from "../elements/Code/CodeDisplay"
+import { ThematicBreakEditor } from "../elements/ThematicBreak/ThematicBreakEditor"
+import { VideoDisplay } from "../elements/Video/VideoDisplay"
+import { LinkElement } from "../elements/Link/LinkElement"
+import { MentionDisplay } from "../elements/Mention/MentionDisplay"
declare module "rehype-react" {
interface WithNode {
@@ -30,7 +39,8 @@ declare module "rehype-react" {
interface CustomComponentsOptions {
[key: string]: any
}
- interface CustomComponentsWithoutNodeOptions extends Omit {
+ interface CustomComponentsWithoutNodeOptions
+ extends Omit {
components?: CustomComponentsOptions
}
export type Options = SharedOptions &
@@ -38,40 +48,45 @@ declare module "rehype-react" {
| ComponentsWithNodeOptions
| ComponentsWithoutNodeOptions
| CustomComponentsWithoutNodeOptions
- );
+ )
}
const settingsRehypeReact = {
createElement,
Fragment,
components: {
- 'tezos-storage-pointer': TezosStorageDisplay,
- 'embed-media': Embed,
- 'img': ImageDisplay,
- 'video': VideoDisplay,
- 'pre': CodeDisplay,
- 'hr': ThematicBreakEditor,
- }
+ "tezos-storage-pointer": TezosStorageDisplay,
+ "embed-media": Embed,
+ img: ImageDisplay,
+ video: VideoDisplay,
+ pre: CodeDisplay,
+ hr: ThematicBreakEditor,
+ a: LinkElement,
+ mention: MentionDisplay,
+ },
}
interface PayloadNFTArticleComponentsFromMarkdown {
[p: string]: any
content: any
}
-export default async function getNFTArticleComponentsFromMarkdown(markdown: string): Promise {
+export default async function getNFTArticleComponentsFromMarkdown(
+ markdown: string
+): Promise {
try {
const matterResult = matter(markdown)
const processed = await unified()
.use(remarkParse)
.use(mdastFlattenListItemParagraphs)
+ .use(mdastParseMentions)
.use(remarkMath)
.use(remarkGfm)
.use(remarkUnwrapImages)
.use(remarkDirective)
.use(remarkFxHashCustom)
+ .use(remarkMentions)
.use(remarkRehype)
.use(rehypePrism)
.use(rehypeKatex)
- .use(rehypeFormat)
.use(rehypeStringify)
// todo: fix this, because of image component for some reason
// @ts-ignore
@@ -82,9 +97,7 @@ export default async function getNFTArticleComponentsFromMarkdown(markdown: stri
...matterResult.data,
content: processed.result,
}
- }
- catch {
+ } catch {
return null
}
}
-
diff --git a/src/components/NFTArticle/processor/getSlateEditorStateFromMarkdown.ts b/src/components/NFTArticle/processor/getSlateEditorStateFromMarkdown.ts
index cf07d94ea..7cc1aa283 100644
--- a/src/components/NFTArticle/processor/getSlateEditorStateFromMarkdown.ts
+++ b/src/components/NFTArticle/processor/getSlateEditorStateFromMarkdown.ts
@@ -1,51 +1,65 @@
-import { Descendant } from "slate";
-import matter from "gray-matter";
-import { unified } from "unified";
-import remarkParse from "remark-parse";
-import remarkMath from "remark-math";
-import remarkUnwrapImages from "remark-unwrap-images";
-import remarkDirective from "remark-directive";
-import { remarkToSlate } from "remark-slate-transformer";
-import { OverridedMdastBuilders } from "remark-slate-transformer/lib/transformers/mdast-to-slate";
-import { mdastFlattenListItemParagraphs, remarkFxHashCustom } from "./plugins";
-import remarkGfm from "remark-gfm";
-import { mathProcessor } from "../elements/Math/MathProcessor";
-import { imageProcessor } from "../elements/Image/ImageProcessor";
-import { videoProcessor } from "../elements/Video/VideoProcessor";
+import { Descendant } from "slate"
+import matter from "gray-matter"
+import { unified } from "unified"
+import remarkParse from "remark-parse"
+import remarkMath from "remark-math"
+import remarkUnwrapImages from "remark-unwrap-images"
+import remarkDirective from "remark-directive"
+import { remarkToSlate } from "remark-slate-transformer"
+import { OverridedMdastBuilders } from "remark-slate-transformer/lib/transformers/mdast-to-slate"
+import {
+ mdastFlattenListItemParagraphs,
+ mdastParseMentions,
+ remarkFxHashCustom,
+} from "./plugins"
+import remarkGfm from "remark-gfm"
+import { mathProcessor } from "../elements/Math/MathProcessor"
+import { imageProcessor } from "../elements/Image/ImageProcessor"
+import { videoProcessor } from "../elements/Video/VideoProcessor"
+import { mentionProcessor } from "../elements/Mention/MentionProcessor"
-interface DirectiveNodeProps { [key: string]: any }
+interface DirectiveNodeProps {
+ [key: string]: any
+}
const directives: Record object> = {
- "video": videoProcessor.transformMarkdownMdhastToSlate!,
+ video: videoProcessor.transformMarkdownMdhastToSlate!,
}
-function createDirectiveNode(node: any, next: (children: any[]) => any): object {
+function createDirectiveNode(
+ node: any,
+ next: (children: any[]) => any
+): object {
const data = node.data || {}
- const hProperties: {[key:string]: any} = (data.hProperties || {}) as {[key:string]: any}
+ const hProperties: { [key: string]: any } = (data.hProperties || {}) as {
+ [key: string]: any
+ }
// extract only defined props to avoid error serialization of undefined
- const propertiesWithoutUndefined: DirectiveNodeProps = Object.keys(hProperties)
- .reduce((acc: DirectiveNodeProps, key: string) =>{
- const value = hProperties[key];
- if (value) {
- acc[key] = value;
- }
- return acc;
- }, {});
+ const propertiesWithoutUndefined: DirectiveNodeProps = Object.keys(
+ hProperties
+ ).reduce((acc: DirectiveNodeProps, key: string) => {
+ const value = hProperties[key]
+ if (value) {
+ acc[key] = value
+ }
+ return acc
+ }, {})
const newNode = {
type: data.hName,
children: next(node.children),
- ...propertiesWithoutUndefined
- };
+ ...propertiesWithoutUndefined,
+ }
const instanciateNode = directives[newNode.type]
- return instanciateNode ? instanciateNode(newNode) : newNode;
+ return instanciateNode ? instanciateNode(newNode) : newNode
}
const remarkSlateTransformerOverrides: OverridedMdastBuilders = {
textDirective: createDirectiveNode,
leafDirective: createDirectiveNode,
containerDirective: createDirectiveNode,
- "inlineMath": mathProcessor.transformMarkdownMdhastToSlate,
- "math": mathProcessor.transformMarkdownMdhastToSlate,
+ inlineMath: mathProcessor.transformMarkdownMdhastToSlate,
+ math: mathProcessor.transformMarkdownMdhastToSlate,
image: imageProcessor.transformMarkdownMdhastToSlate,
+ mention: mentionProcessor.transformMarkdownMdhastToSlate,
}
interface PayloadSlateEditorStateFromMarkdown {
@@ -53,28 +67,31 @@ interface PayloadSlateEditorStateFromMarkdown {
editorState: Descendant[]
}
-export default async function getSlateEditorStateFromMarkdown(markdown: string): Promise {
+export default async function getSlateEditorStateFromMarkdown(
+ markdown: string
+): Promise {
try {
const matterResult = matter(markdown)
const processed = await unified()
.use(remarkParse)
.use(mdastFlattenListItemParagraphs)
+ .use(mdastParseMentions)
.use(remarkMath)
.use(remarkGfm)
.use(remarkUnwrapImages)
.use(remarkDirective)
.use(remarkFxHashCustom)
.use(remarkToSlate, {
- overrides: remarkSlateTransformerOverrides
+ overrides: remarkSlateTransformerOverrides,
})
.process(matterResult.content)
return {
...matterResult.data,
- editorState: processed.result as Descendant[]
- };
- } catch(e) {
+ editorState: processed.result as Descendant[],
+ }
+ } catch (e) {
console.error(e)
- return null;
+ return null
}
}
diff --git a/src/components/NFTArticle/processor/index.ts b/src/components/NFTArticle/processor/index.ts
index c2c7940a3..8293a9a15 100644
--- a/src/components/NFTArticle/processor/index.ts
+++ b/src/components/NFTArticle/processor/index.ts
@@ -1,3 +1,3 @@
-export { default as getMarkdownFromSlateEditorState } from "./getMarkdownFromSlateEditorState";
-export { default as getSlateEditorStateFromMarkdown } from "./getSlateEditorStateFromMarkdown";
-export { default as getNFTArticleComponentsFromMarkdown } from "./getNFTArticleComponentsFromMarkdown";
+export { default as getMarkdownFromSlateEditorState } from "./getMarkdownFromSlateEditorState"
+export { default as getSlateEditorStateFromMarkdown } from "./getSlateEditorStateFromMarkdown"
+export { default as getNFTArticleComponentsFromMarkdown } from "./getNFTArticleComponentsFromMarkdown"
diff --git a/src/components/NFTArticle/processor/plugins.ts b/src/components/NFTArticle/processor/plugins.ts
index 3b31be66a..431301dda 100644
--- a/src/components/NFTArticle/processor/plugins.ts
+++ b/src/components/NFTArticle/processor/plugins.ts
@@ -1,22 +1,36 @@
-import { Root } from "mdast"
+import { Parent, PhrasingContent, Root } from "mdast"
import { Transformer } from "unified"
import { visit } from "unist-util-visit"
import { h } from "hastscript"
-import { IArticleElementProcessor } from "../../../types/ArticleEditor/Processor";
-import { embedProcessor } from "../elements/Embed/EmbedProcessor";
-import { tezosStorageProcessor } from "../elements/TezosStorage/TezosStorageProcessor";
-import { videoProcessor } from "../elements/Video/VideoProcessor";
+import { u } from "unist-builder"
+import { IArticleElementProcessor } from "../../../types/ArticleEditor/Processor"
+import { embedProcessor } from "../elements/Embed/EmbedProcessor"
+import { tezosStorageProcessor } from "../elements/TezosStorage/TezosStorageProcessor"
+import { videoProcessor } from "../elements/Video/VideoProcessor"
+import { findAndReplace } from "mdast-util-find-and-replace"
+import { mentionProcessor } from "../elements/Mention/MentionProcessor"
+
+// declare module 'mdast' {
+// interface Mention extends Parent {
+// type: 'mention';
+// value: string;
+// children: PhrasingContent[];
+// }
+// interface StaticPhrasingContentMap {
+// mention: Mention;
+// }
+// }
interface CustomArticleElementsByType {
- leafDirective: Record,
- textDirective: Record,
- containerDirective: Record,
+ leafDirective: Record
+ textDirective: Record
+ containerDirective: Record
}
export const customNodes: CustomArticleElementsByType = {
leafDirective: {
"tezos-storage-pointer": tezosStorageProcessor,
"embed-media": embedProcessor,
- "video": videoProcessor,
+ video: videoProcessor,
},
textDirective: {},
containerDirective: {},
@@ -25,18 +39,42 @@ export function remarkFxHashCustom(): Transformer {
return (tree: Root) => {
visit(tree, (node) => {
if (
- node.type === 'textDirective' ||
- node.type === 'leafDirective' ||
- node.type === 'containerDirective'
+ node.type === "textDirective" ||
+ node.type === "leafDirective" ||
+ node.type === "containerDirective"
) {
const component = customNodes[node.type]?.[node.name]
if (component?.transformMdhastToComponent) {
const hast: any = h(node.name, node.attributes)
- const props = component.transformMdhastToComponent(node, hast.properties)
+ const props = component.transformMdhastToComponent(
+ node,
+ hast.properties
+ )
if (props) {
const data = node.data || (node.data = {})
data.hName = component.htmlTagName || hast.tagName
- data.hProperties = props;
+ data.hProperties = props
+ }
+ }
+ }
+ })
+ }
+}
+export function remarkMentions(): Transformer {
+ return (tree: Root) => {
+ visit(tree, (node: any) => {
+ if (node.type === "mention") {
+ const component = mentionProcessor
+ if (component?.transformMdhastToComponent) {
+ const hast: any = h(node.name, { value: node.value })
+ const props = component.transformMdhastToComponent(
+ node,
+ hast.properties
+ )
+ if (props) {
+ const data = node.data || (node.data = {})
+ data.hName = component.htmlTagName || hast.tagName
+ data.hProperties = props
}
}
}
@@ -46,16 +84,32 @@ export function remarkFxHashCustom(): Transformer {
export function mdastFlattenListItemParagraphs(): Transformer {
return (ast) => {
- visit(ast, 'listItem', (listItem: any) => {
+ visit(ast, "listItem", (listItem: any) => {
if (
listItem.children.length === 1 &&
- listItem.children[0].type === 'paragraph'
+ listItem.children[0].type === "paragraph"
) {
- listItem.children = listItem.children[0].children;
+ listItem.children = listItem.children[0].children
}
- return listItem;
- });
- return ast;
- };
+ return listItem
+ })
+ return ast
+ }
}
+export function mdastParseMentions(): Transformer {
+ return (ast) => {
+ // @ts-ignore
+ findAndReplace(ast, [
+ [
+ /@(tz[1-3][1-9a-zA-Z]{33})/g,
+ function ($0: any, $1: any) {
+ return u("mention", { name: "mention", value: $1 }, [
+ { type: "text", value: "" },
+ ])
+ },
+ ],
+ ])
+ return ast
+ }
+}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 86f86ab76..943bc3519 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,17 +1,17 @@
-import Link from 'next/link'
-import style from './Navigation.module.scss'
-import text from '../styles/Text.module.css'
-import effects from '../styles/Effects.module.scss'
-import cs from 'classnames'
-import { Button } from './Button'
-import { useContext, useMemo } from 'react'
-import { UserContext } from '../containers/UserProvider'
-import { Dropdown } from './Navigation/Dropdown'
-import { Avatar } from './User/Avatar'
-import { getUserProfileLink } from '../utils/user'
-import { useState, useEffect } from 'react'
-import { useRouter } from 'next/router'
-import { SettingsModal } from '../containers/Settings/SettingsModal'
+import Link from "next/link"
+import style from "./Navigation.module.scss"
+import text from "../styles/Text.module.css"
+import effects from "../styles/Effects.module.scss"
+import cs from "classnames"
+import { Button } from "./Button"
+import { useContext, useMemo } from "react"
+import { UserContext } from "../containers/UserProvider"
+import { Dropdown } from "./Navigation/Dropdown"
+import { Avatar } from "./User/Avatar"
+import { getUserProfileLink } from "../utils/user"
+import { useState, useEffect } from "react"
+import { useRouter } from "next/router"
+import { SettingsModal } from "../containers/Settings/SettingsModal"
export function Navigation() {
const userCtx = useContext(UserContext)
@@ -30,13 +30,20 @@ export function Navigation() {
return (
<>
{settingsModal && (
- setSettingsModal(false)}
- />
+ setSettingsModal(false)} />
)}
)
diff --git a/src/components/Navigation/Dropdown.module.scss b/src/components/Navigation/Dropdown.module.scss
index 5addbeec0..d6c98be85 100644
--- a/src/components/Navigation/Dropdown.module.scss
+++ b/src/components/Navigation/Dropdown.module.scss
@@ -53,31 +53,33 @@
}
@media (max-width: $breakpoint-md) {
- .container {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- }
+ .mobile_static_menu {
+ &.container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ }
- .menu {
- align-items: flex-end;
- position: static;
- opacity: 1;
- height: 0;
- overflow: hidden;
- box-shadow: none;
- box-sizing: border-box;
- padding: 0;
- border: none;
+ .menu {
+ align-items: flex-end;
+ position: static;
+ opacity: 1;
+ height: 0;
+ overflow: hidden;
+ box-shadow: none;
+ box-sizing: border-box;
+ padding: 0;
+ border: none;
- button {
- margin-right: 15px;
+ button {
+ margin-right: 15px;
+ }
}
- }
- .menu-opened {
- height: auto;
- border-right: 3px solid black;
- border-top: 3px solid black;
+ .menu-opened {
+ height: auto;
+ border-right: 3px solid black;
+ border-top: 3px solid black;
+ }
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Navigation/Dropdown.tsx b/src/components/Navigation/Dropdown.tsx
index 12a06bbcc..d4aea15dd 100644
--- a/src/components/Navigation/Dropdown.tsx
+++ b/src/components/Navigation/Dropdown.tsx
@@ -1,16 +1,21 @@
import style from "./Dropdown.module.scss"
import cs from "classnames"
-import { MouseEventHandler, PropsWithChildren, useCallback, useState } from "react"
+import {
+ MouseEventHandler,
+ PropsWithChildren,
+ useCallback,
+ useState,
+} from "react"
import { DropdownMenu } from "./DropdownMenu"
import { useClientEffect } from "../../utils/hookts"
-
interface Props {
itemComp: React.ReactNode
ariaLabel?: string
className?: string
btnClassName?: string
closeOnClick?: boolean
+ mobileMenuAbsolute?: boolean
}
export function Dropdown({
@@ -19,23 +24,26 @@ export function Dropdown({
className,
btnClassName,
closeOnClick = true,
- children
+ children,
+ mobileMenuAbsolute,
}: PropsWithChildren) {
const [opened, setOpened] = useState(false)
- const toggle: MouseEventHandler = useCallback((evt) => {
- evt.preventDefault()
- evt.stopPropagation()
- setOpened(!opened)
- }, [opened])
+ const toggle: MouseEventHandler = useCallback(
+ (evt) => {
+ evt.preventDefault()
+ evt.stopPropagation()
+ setOpened(!opened)
+ },
+ [opened]
+ )
useClientEffect(() => {
if (opened) {
const onClick = (evt: any) => {
if (closeOnClick) {
setOpened(false)
- }
- else {
+ } else {
let close = true
if (evt.path) {
for (const el of evt.path) {
@@ -58,19 +66,22 @@ export function Dropdown({
}, [opened])
return (
- ) {
+export function DropdownMenu({
+ opened,
+ className,
+ children,
+}: PropsWithChildren) {
return (
- (({
- url,
- onLoaded,
- resetOnUrlChange = false
-}, ref) => {
- const [loaded, setLoaded] = useState(false)
+export const RevealIframe = forwardRef(
+ ({ url, onLoaded, resetOnUrlChange = false }, ref) => {
+ const [loaded, setLoaded] = useState(false)
- useEffect(() => {
- if (resetOnUrlChange) {
- setLoaded(false)
- }
- }, [resetOnUrlChange, url])
+ useEffect(() => {
+ if (resetOnUrlChange) {
+ setLoaded(false)
+ }
+ }, [resetOnUrlChange, url])
- const isLoaded = () => {
- setTimeout(() => {
- setLoaded(true)
- onLoaded?.()
- }, 500)
- }
+ const isLoaded = () => {
+ setTimeout(() => {
+ setLoaded(true)
+ onLoaded?.()
+ }, 500)
+ }
- return (
-
- {children &&
+("")
- const handleAddFile = useCallback((files) => {
- if (!files || !files[0]) return null;
- const [file] = files;
- if (file) {
+ const handleAddFile = useCallback(
+ (files) => {
+ if (!files || !files[0]) return null
+ const [file] = files
+ if (file) {
+ onEdit({
+ src: URL.createObjectURL(file),
+ })
+ }
+ },
+ [onEdit]
+ )
+ const handleChangeUrlVideo = useCallback(
+ (event) => setTextUrl(event.target.value),
+ []
+ )
+ const handleImportVideoFromUrl = useCallback(
+ (event) => {
+ event.preventDefault()
onEdit({
- src: URL.createObjectURL(file)
+ src: textUrl,
})
- }
- }, [onEdit])
- const handleChangeUrlVideo = useCallback(event => setTextUrl(event.target.value), []);
- const handleImportVideoFromUrl = useCallback((event) => {
- event.preventDefault()
- onEdit({
- src: textUrl
- })
- }, [onEdit, textUrl])
+ },
+ [onEdit, textUrl]
+ )
return (
{showAddVideo && (
-
- {children}
-
}
- +
+ {children && (
+
)
}
diff --git a/src/components/NFTArticle/elements/Video/VideoAttributeSettings.tsx b/src/components/NFTArticle/elements/Video/VideoAttributeSettings.tsx
index 2cf299d4c..6f14ceaf3 100644
--- a/src/components/NFTArticle/elements/Video/VideoAttributeSettings.tsx
+++ b/src/components/NFTArticle/elements/Video/VideoAttributeSettings.tsx
@@ -3,44 +3,51 @@ import style from "./VideoAttributeSettings.module.scss"
import { Dropzone } from "../../../Input/Dropzone"
import { TabDefinition } from "../../../Layout/Tabs"
import { TabsContainer } from "../../../Layout/TabsContainer"
-import { useCallback, useState } from "react";
-import { Field } from "../../../Form/Field";
-import { InputText } from "../../../Input/InputText";
-import { Submit } from "../../../Form/Submit";
-import { Button } from "../../../Button";
-import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition";
+import { useCallback, useState } from "react"
+import { Field } from "../../../Form/Field"
+import { InputText } from "../../../Input/InputText"
+import { Submit } from "../../../Form/Submit"
+import { Button } from "../../../Button"
+import { TEditAttributeComp } from "../../../../types/ArticleEditor/BlockDefinition"
const tabs: TabDefinition[] = [
{
- name: "Upload"
+ name: "Upload",
},
{
- name: "External link"
- }
+ name: "External link",
+ },
]
-const acceptedVideoFiles = ["video/mp4", "video/ogg", "video/webm"];
+const acceptedVideoFiles = ["video/mp4", "video/ogg", "video/webm"]
-export const VideoAttributeSettings: TEditAttributeComp = ({
- onEdit,
-}) => {
+export const VideoAttributeSettings: TEditAttributeComp = ({ onEdit }) => {
const [textUrl, setTextUrl] = useState{children}
+ )}
+
@@ -56,27 +63,20 @@ export const VideoAttributeSettings: TEditAttributeComp = ({
onChange={handleAddFile}
accepted={acceptedVideoFiles}
className={cs(style.dropzone)}
- textDefault={(
+ textDefault={
= {
name: "Video",
- icon: ,
+ icon: ,
buttonInstantiable: true,
render: ({ attributes, element, children }) => {
return (
@@ -17,19 +17,26 @@ export const videoDefinition: IArticleBlockDefinition = {
)
},
hasUtilityWrapper: false,
- instanciateElement: (opts = { src: '', caption: '' }) => ({
+ instanciateElement: (opts = { src: "", caption: "" }) => ({
type: "figure",
- children: [{
- type: "video",
- src: opts.src,
- children: [{
- text: ""
- }]
- }, {
- type: "figcaption",
- children: [{
- text: opts.caption
- }]
- }]
+ children: [
+ {
+ type: "video",
+ src: opts.src,
+ children: [
+ {
+ text: "",
+ },
+ ],
+ },
+ {
+ type: "figcaption",
+ children: [
+ {
+ text: opts.caption,
+ },
+ ],
+ },
+ ],
}),
-};
+}
diff --git a/src/components/NFTArticle/elements/Video/VideoDisplay.tsx b/src/components/NFTArticle/elements/Video/VideoDisplay.tsx
index 3c1fdd60a..2d3e39599 100644
--- a/src/components/NFTArticle/elements/Video/VideoDisplay.tsx
+++ b/src/components/NFTArticle/elements/Video/VideoDisplay.tsx
@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
-import { VideoPolymorphic } from "../../../Medias/VideoPolymorphic";
+import React, { memo } from "react"
+import { VideoPolymorphic } from "../../../Medias/VideoPolymorphic"
interface VideoDisplayProps {
src: string
@@ -8,16 +8,9 @@ interface VideoDisplayProps {
const _VideoDisplay = ({ src, children }: VideoDisplayProps) => (
-
- {children}
-
- )}
+ {children} }
-);
+)
-export const VideoDisplay = memo(_VideoDisplay);
+export const VideoDisplay = memo(_VideoDisplay)
diff --git a/src/components/NFTArticle/elements/Video/VideoEditor.tsx b/src/components/NFTArticle/elements/Video/VideoEditor.tsx
index ec93a210b..08b52d846 100644
--- a/src/components/NFTArticle/elements/Video/VideoEditor.tsx
+++ b/src/components/NFTArticle/elements/Video/VideoEditor.tsx
@@ -1,23 +1,27 @@
-import { memo, NamedExoticComponent, PropsWithChildren, useCallback, useState } from "react"
+import {
+ memo,
+ NamedExoticComponent,
+ PropsWithChildren,
+ useCallback,
+ useState,
+} from "react"
import { Transforms } from "slate"
import { ReactEditor, useSlateStatic } from "slate-react"
import style from "./VideoEditor.module.scss"
import editorStyle from "../../SlateEditor/UI/EditorStyles.module.scss"
import cs from "classnames"
-import { BlockParamsModal } from "../../SlateEditor/UI/BlockParamsModal";
-import { VideoAttributeSettings } from "./VideoAttributeSettings";
-import { VideoPolymorphic } from "../../../Medias/VideoPolymorphic";
+import { BlockParamsModal } from "../../SlateEditor/UI/BlockParamsModal"
+import { VideoAttributeSettings } from "./VideoAttributeSettings"
+import { VideoPolymorphic } from "../../../Medias/VideoPolymorphic"
interface VideoElementProps {
attributes?: any
element?: any
- src?: string,
+ src?: string
}
-export const VideoEditor: NamedExoticComponent> = memo(({
- attributes,
- element,
- children,
-}) => {
+export const VideoEditor: NamedExoticComponent<
+ PropsWithChildren
+> = memo(({ attributes, element, children }) => {
const [showAddVideo, setShowAddVideo] = useState(false)
const editor = useSlateStatic()
const path = ReactEditor.findPath(editor, element)
@@ -25,15 +29,22 @@ export const VideoEditor: NamedExoticComponent {
event.preventDefault()
event.stopPropagation()
- setShowAddVideo(true);
+ setShowAddVideo(true)
}, [])
- const handleCloseAddVideo = useCallback(() => setShowAddVideo(false), []);
- const handleAddVideo = useCallback((element) => {
- Transforms.setNodes(editor, { src: element.src }, {
- at: path
- })
- setShowAddVideo(false);
- }, [editor, path])
+ const handleCloseAddVideo = useCallback(() => setShowAddVideo(false), [])
+ const handleAddVideo = useCallback(
+ (element) => {
+ Transforms.setNodes(
+ editor,
+ { src: element.src },
+ {
+ at: path,
+ }
+ )
+ setShowAddVideo(false)
+ },
+ [editor, path]
+ )
const hasUrl = element.src !== ""
@@ -47,33 +58,27 @@ export const VideoEditor: NamedExoticComponent
-
-
- Import a video (100mb max)
-
+
+ Import a video (50mb max)
- )}
- textDrag={(
+ }
+ textDrag={
-
- Drop video file
-
+ Drop video file
- )}
+ }
/>
- )
- : tabIndex === 1 ? (
-
+ ) : tabIndex === 1 ? (
+
- ): null}
+ ) : null}
)}
diff --git a/src/components/NFTArticle/elements/Video/VideoDefinition.tsx b/src/components/NFTArticle/elements/Video/VideoDefinition.tsx
index c20c9eb8f..8e5211e38 100644
--- a/src/components/NFTArticle/elements/Video/VideoDefinition.tsx
+++ b/src/components/NFTArticle/elements/Video/VideoDefinition.tsx
@@ -1,5 +1,5 @@
-import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition";
-import { VideoEditor } from "./VideoEditor";
+import { IArticleBlockDefinition } from "../../../../types/ArticleEditor/BlockDefinition"
+import { VideoEditor } from "./VideoEditor"
interface InstanciateVideoOpts {
src?: string
@@ -7,7 +7,7 @@ interface InstanciateVideoOpts {
}
export const videoDefinition: IArticleBlockDefinition
-
)
-}
\ No newline at end of file
+}
diff --git a/src/components/Navigation/DropdownMenu.tsx b/src/components/Navigation/DropdownMenu.tsx
index 2f4683eed..c7d479a43 100644
--- a/src/components/Navigation/DropdownMenu.tsx
+++ b/src/components/Navigation/DropdownMenu.tsx
@@ -3,20 +3,23 @@ import style from "./Dropdown.module.scss"
import effects from "../../styles/Effects.module.scss"
import cs from "classnames"
-
interface Props {
opened: boolean
className?: string
}
-export function DropdownMenu({ opened, className, children }: PropsWithChildren
- { children }
+ {children}
)
-}
\ No newline at end of file
+}
diff --git a/src/components/Objkt/ObjktImageAndName.tsx b/src/components/Objkt/ObjktImageAndName.tsx
index 3a72d3609..d0c78c78e 100644
--- a/src/components/Objkt/ObjktImageAndName.tsx
+++ b/src/components/Objkt/ObjktImageAndName.tsx
@@ -1,28 +1,31 @@
-import React, { memo, useMemo } from 'react';
-import style from "./ObjktImageAndName.module.scss";
-import { Objkt } from "../../types/entities/Objkt";
-import Link from "next/link";
-import Image from "next/image";
-import { ipfsGatewayUrl } from "../../services/Ipfs";
+import React, { memo, useMemo } from "react"
+import style from "./ObjktImageAndName.module.scss"
+import { Objkt } from "../../types/entities/Objkt"
+import Link from "next/link"
+import Image from "next/image"
+import { ipfsGatewayUrl } from "../../services/Ipfs"
interface Props {
- objkt: Objkt,
+ objkt: Objkt
imagePriority?: boolean
shortName?: boolean
size?: number
}
-const _ObjtkImageAndName = ({
+const _ObjtkImageAndName = ({
objkt,
imagePriority,
shortName,
size = 40,
}: Props) => {
- const thumbnailUrl = useMemo(() => ipfsGatewayUrl(objkt.metadata?.thumbnailUri), [objkt])
+ const thumbnailUrl = useMemo(
+ () => ipfsGatewayUrl(objkt.metadata?.thumbnailUri),
+ [objkt]
+ )
return (
- {thumbnailUrl &&
+ {thumbnailUrl && (
- {pages.map(page => (
+ {pages.map((page) => (
- {page < 0
- ? ...
- : (
-
- )}
+ {page < 0 ? (
+ ...
+ ) : (
+
+ )}
))}
-
-
-