Skip to content

Commit

Permalink
refactor(portable-text-editor): rename type > schemaType
Browse files Browse the repository at this point in the history 
Keep consistent with the rest of the codebase.
  • Loading branch information
@skogsmaskin
skogsmaskin committed Dec 20, 2022
1 parent 8c08f85 commit d25cbb5
Show file tree
Hide file tree
Showing 34 changed files with 210 additions and 185 deletions.
32 changes: 16 additions & 16 deletions packages/@sanity/portable-text-editor/src/editor/Editable.tsx
View file
Expand Up @@ -106,18 +106,18 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
const readOnly = usePortableTextEditorReadOnlyStatus()
const ref = useForwardedRef(forwardedRef)

const {change$, keyGenerator, types, slateInstance: slateEditor} = portableTextEditor
const {change$, keyGenerator, schemaTypes, slateInstance: slateEditor} = portableTextEditor

const blockTypeName = types.block.name
const blockTypeName = schemaTypes.block.name

// React/UI-spesific plugins
const withInsertData = useMemo(
() => createWithInsertData(change$, types, keyGenerator),
[change$, keyGenerator, types]
() => createWithInsertData(change$, schemaTypes, keyGenerator),
[change$, keyGenerator, schemaTypes]
)
const withHotKeys = useMemo(
() => createWithHotkeys(types, keyGenerator, portableTextEditor, hotkeys),
[hotkeys, keyGenerator, portableTextEditor, types]
() => createWithHotkeys(schemaTypes, keyGenerator, portableTextEditor, hotkeys),
[hotkeys, keyGenerator, portableTextEditor, schemaTypes]
)

// Output a minimal React editor inside Editable when in readOnly mode.
Expand All @@ -136,7 +136,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
(eProps: RenderElementProps) => (
<Element
{...eProps}
types={types}
schemaTypes={schemaTypes}
readOnly={readOnly}
renderBlock={renderBlock}
renderChild={renderChild}
Expand All @@ -145,7 +145,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
spellCheck={spellCheck}
/>
),
[types, spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle]
[schemaTypes, spellCheck, readOnly, renderBlock, renderChild, renderListItem, renderStyle]
)

const renderLeaf = useCallback(
Expand All @@ -159,7 +159,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
<Leaf
{...lProps}
keyGenerator={keyGenerator}
types={types}
schemaTypes={schemaTypes}
renderAnnotation={renderAnnotation}
renderChild={renderChild}
renderDecorator={renderDecorator}
Expand All @@ -172,7 +172,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
<Leaf
{...lProps}
keyGenerator={keyGenerator}
types={types}
schemaTypes={schemaTypes}
renderAnnotation={renderAnnotation}
renderChild={renderChild}
renderDecorator={renderDecorator}
Expand All @@ -187,7 +187,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
renderChild,
renderDecorator,
renderPlaceholder,
types,
schemaTypes,
]
)

Expand Down Expand Up @@ -256,7 +256,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
event,
value: PortableTextEditor.getValue(portableTextEditor),
path: slateEditor.selection?.focus.path || [],
types,
schemaTypes,
})
)
})
Expand All @@ -269,7 +269,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
return
}
if (result && result.insert) {
slateEditor.insertFragment(toSlateValue(result.insert, {types}))
slateEditor.insertFragment(toSlateValue(result.insert, {schemaTypes}))
change$.next({type: 'loading', isLoading: false})
return
}
Expand All @@ -281,7 +281,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
return error
})
},
[change$, onPaste, portableTextEditor, types, slateEditor]
[change$, onPaste, portableTextEditor, schemaTypes, slateEditor]
)

const handleOnFocus = useCallback(() => {
Expand Down Expand Up @@ -319,7 +319,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
}, [portableTextEditor, scrollSelectionIntoView])

const decorate = useCallback(() => {
if (isEqualToEmptyEditor(slateEditor.children, types)) {
if (isEqualToEmptyEditor(slateEditor.children, schemaTypes)) {
return [
{
anchor: {
Expand All @@ -335,7 +335,7 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
]
}
return EMPTY_DECORATORS
}, [types, slateEditor.children])
}, [slateEditor.children])

// The editor
const slateEditable = useMemo(
Expand Down
34 changes: 19 additions & 15 deletions packages/@sanity/portable-text-editor/src/editor/Element.tsx
View file
Expand Up @@ -4,7 +4,7 @@ import {Path, PortableTextChild, PortableTextObject, PortableTextTextBlock} from
import {useSelected, useSlateStatic, ReactEditor, RenderElementProps} from '@sanity/slate-react'
import {
BlockRenderProps,
PortableTextMemberTypes,
PortableTextMemberSchemaTypes,
RenderBlockFunction,
RenderChildFunction,
RenderListItemFunction,
Expand All @@ -25,7 +25,7 @@ interface ElementProps {
attributes: RenderElementProps['attributes']
children: ReactElement
element: SlateElement
types: PortableTextMemberTypes
schemaTypes: PortableTextMemberSchemaTypes
readOnly: boolean
renderBlock?: RenderBlockFunction
renderChild?: RenderChildFunction
Expand All @@ -41,7 +41,7 @@ export const Element: FunctionComponent<ElementProps> = ({
attributes,
children,
element,
types,
schemaTypes,
readOnly,
renderBlock,
renderChild,
Expand All @@ -56,8 +56,8 @@ export const Element: FunctionComponent<ElementProps> = ({
const focused = (selected && editor.selection && Range.isCollapsed(editor.selection)) || false

const value = useMemo(
() => fromSlateValue([element], types.block.name, KEY_TO_VALUE_ELEMENT.get(editor))[0],
[editor, element, types.block.name]
() => fromSlateValue([element], schemaTypes.block.name, KEY_TO_VALUE_ELEMENT.get(editor))[0],
[editor, element, schemaTypes.block.name]
)

let renderedBlock = children
Expand All @@ -78,8 +78,8 @@ export const Element: FunctionComponent<ElementProps> = ({
if (editor.isInline(element)) {
const path = ReactEditor.findPath(editor, element)
const [block] = Editor.node(editor, path, {depth: 1})
const type = types.inlineObjects.find((_type) => _type.name === element._type)
if (!type) {
const schemaType = schemaTypes.inlineObjects.find((_type) => _type.name === element._type)
if (!schemaType) {
throw new Error('Could not find type for inline block element')
}
if (SlateElement.isElement(block)) {
Expand All @@ -104,7 +104,7 @@ export const Element: FunctionComponent<ElementProps> = ({
annotations: EMPTY_ANNOTATIONS, // These inline objects currently doesn't support annotations. This is a limitation of the current PT spec/model.
children: <ObjectNode value={value} />,
value: value as PortableTextChild,
type,
schemaType,
focused,
selected,
path: elmPath,
Expand All @@ -121,15 +121,15 @@ export const Element: FunctionComponent<ElementProps> = ({

// If not inline, it's either a block (text) or a block object (non-text)
// NOTE: text blocks aren't draggable with DraggableBlock (yet?)
if (element._type === types.block.name) {
if (element._type === schemaTypes.block.name) {
className = `pt-block pt-text-block`
const isListItem = 'listItem' in element
if (debugRenders) {
debug(`Render ${element._key} (text block)`)
}
const style = ('style' in element && element.style) || 'normal'
className = `pt-block pt-text-block pt-text-block-style-${style}`
const blockStyleType = types.styles.find((item) => item.value === style)
const blockStyleType = schemaTypes.styles.find((item) => item.value === style)
if (renderStyle && blockStyleType) {
renderedBlock = renderStyle({
block: element as PortableTextTextBlock,
Expand All @@ -150,7 +150,7 @@ export const Element: FunctionComponent<ElementProps> = ({
className += ` pt-list-item pt-list-item-${element.listItem} pt-list-item-level-${level || 1}`
}
if (editor.isListBlock(value) && isListItem && element.listItem) {
const listType = types.lists.find((item) => item.value === element.listItem)
const listType = schemaTypes.lists.find((item) => item.value === element.listItem)
if (renderListItem && listType) {
renderedBlock = renderListItem({
block: value,
Expand All @@ -166,7 +166,7 @@ export const Element: FunctionComponent<ElementProps> = ({
} else {
renderedBlock = (
<DefaultListItem
listStyle={value.listItem || types.lists[0].value}
listStyle={value.listItem || schemaTypes.lists[0].value}
listLevel={value.level || 1}
>
<DefaultListItemInner>{renderedBlock}</DefaultListItemInner>
Expand All @@ -183,7 +183,7 @@ export const Element: FunctionComponent<ElementProps> = ({
path: blockPath,
selected,
style,
type: types.block,
type: schemaTypes.block,
value,
}

Expand All @@ -196,15 +196,19 @@ export const Element: FunctionComponent<ElementProps> = ({
</div>
)
}
const type = types.blockObjects.find((_type) => _type.name === element._type)
const type = schemaTypes.blockObjects.find((_type) => _type.name === element._type)
if (!type) {
throw new Error(`Could not find schema type for block element of _type ${element._type}`)
}
if (debugRenders) {
debug(`Render ${element._key} (object block)`)
}
className = 'pt-block pt-object-block'
const block = fromSlateValue([element], types.block.name, KEY_TO_VALUE_ELEMENT.get(editor))[0]
const block = fromSlateValue(
[element],
schemaTypes.block.name,
KEY_TO_VALUE_ELEMENT.get(editor)
)[0]
const renderedBlockFromProps =
renderBlock &&
renderBlock({
Expand Down
16 changes: 8 additions & 8 deletions packages/@sanity/portable-text-editor/src/editor/Leaf.tsx
View file
Expand Up @@ -5,7 +5,7 @@ import {uniq} from 'lodash'
import {PortableTextObject, PortableTextTextBlock} from '@sanity/types'
import {
RenderChildFunction,
PortableTextMemberTypes,
PortableTextMemberSchemaTypes,
RenderAnnotationFunction,
RenderDecoratorFunction,
} from '../types/editor'
Expand All @@ -19,7 +19,7 @@ const debugRenders = false
interface LeafProps extends RenderLeafProps {
children: ReactElement
keyGenerator: () => string
types: PortableTextMemberTypes
schemaTypes: PortableTextMemberSchemaTypes
renderAnnotation?: RenderAnnotationFunction
renderChild?: RenderChildFunction
renderDecorator?: RenderDecoratorFunction
Expand All @@ -29,21 +29,21 @@ interface LeafProps extends RenderLeafProps {
export const Leaf = (props: LeafProps) => {
const editor = useSlateStatic()
const selected = useSelected()
const {attributes, children, leaf, types, keyGenerator, renderChild, readOnly} = props
const {attributes, children, leaf, schemaTypes, keyGenerator, renderChild, readOnly} = props
const spanRef = React.useRef(null)
let returnedChildren = children
const focused = (selected && editor.selection && Range.isCollapsed(editor.selection)) || false

// Render text nodes
if (Text.isText(leaf) && leaf._type === types.span.name) {
if (Text.isText(leaf) && leaf._type === schemaTypes.span.name) {
const block = children.props.parent as PortableTextTextBlock | undefined
const path = block ? [{_key: block._key}, 'children', {_key: leaf._key}] : []
const decoratorValues = types.decorators.map((dec) => dec.value)
const decoratorValues = schemaTypes.decorators.map((dec) => dec.value)
const marks: string[] = uniq(
(Array.isArray(leaf.marks) ? leaf.marks : []).filter((mark) => decoratorValues.includes(mark))
)
marks.forEach((mark) => {
const type = types.decorators.find((dec) => dec.value === mark)
const type = schemaTypes.decorators.find((dec) => dec.value === mark)
if (type && props.renderDecorator) {
returnedChildren = props.renderDecorator({
children: returnedChildren,
Expand All @@ -69,7 +69,7 @@ export const Leaf = (props: LeafProps) => {

if (block && annotations.length > 0) {
annotations.forEach((annotation) => {
const type = types.annotations.find((t) => t.name === annotation._type)
const type = schemaTypes.annotations.find((t) => t.name === annotation._type)
if (type) {
if (props.renderAnnotation) {
returnedChildren = (
Expand Down Expand Up @@ -103,7 +103,7 @@ export const Leaf = (props: LeafProps) => {
returnedChildren = renderChild({
children: defaultRendered,
value: child,
type: types.span,
schemaType: schemaTypes.span,
focused,
selected,
path,
Expand Down

0 comments on commit d25cbb5

Please sign in to comment.