diff --git a/packages/format-library/src/default-formats.js b/packages/format-library/src/default-formats.js index f6123ac402854..5db64abc26e31 100644 --- a/packages/format-library/src/default-formats.js +++ b/packages/format-library/src/default-formats.js @@ -16,7 +16,7 @@ import { unknown } from './unknown'; import { currentYear } from './current-year'; import { footnote } from './footnote'; import { postDate } from './post-date'; -import { time } from './time'; +import { currentYear } from './current-year'; export default [ bold, @@ -34,5 +34,5 @@ export default [ currentYear, footnote, postDate, - time, + currentYear, ]; diff --git a/packages/format-library/src/footnote/index.js b/packages/format-library/src/footnote/index.js index da46549a3cfa2..bf6a8ad4abf96 100644 --- a/packages/format-library/src/footnote/index.js +++ b/packages/format-library/src/footnote/index.js @@ -14,9 +14,9 @@ export const footnote = { name, title, tagName: 'data', - className: null, attributes: { - note: ( element ) => element.replace( /^\[/, '' ).replace( /\]$/, '' ), + note: ( element ) => + element.innerHTML.replace( /^\[/, '' ).replace( /\]$/, '' ), }, render() { return ( @@ -27,7 +27,7 @@ export const footnote = { ); }, - save( { attributes: { note } } ) { + saveFallback( { attributes: { note } } ) { return `[${ note }]`; }, edit( { @@ -42,9 +42,8 @@ export const footnote = { const newValue = insertObject( value, { type: name, attributes: { - innerHtml: '', + note: '', }, - tagName: 'data', } ); newValue.start = newValue.end - 1; onChange( newValue ); @@ -98,7 +97,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { type: name, attributes: { ...activeObjectAttributes, - innerHtml: '[' + newNote + ']', + note: newNote, }, }; diff --git a/packages/format-library/src/post-date/index.js b/packages/format-library/src/post-date/index.js index 7adc998d024a8..15c4eb13948d4 100644 --- a/packages/format-library/src/post-date/index.js +++ b/packages/format-library/src/post-date/index.js @@ -19,7 +19,6 @@ export const postDate = { name, title, tagName: 'data', - className: null, render: function Render() { const displayType = 'date'; const format = ''; @@ -54,7 +53,6 @@ export const postDate = { function onClick() { const newValue = insertObject( value, { type: name, - tagName: 'data', } ); newValue.start = newValue.end - 1; onChange( newValue ); @@ -62,12 +60,14 @@ export const postDate = { } return ( - + <> + + ); }, }; diff --git a/packages/format-library/src/time/index.js b/packages/format-library/src/time/index.js deleted file mode 100644 index 12f65dd969f0f..0000000000000 --- a/packages/format-library/src/time/index.js +++ /dev/null @@ -1,166 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { insertObject, useAnchor } from '@wordpress/rich-text'; -import { - RichTextToolbarButton, - __experimentalDateFormatPicker as DateFormatPicker, -} from '@wordpress/block-editor'; -import { formatListNumbered } from '@wordpress/icons'; -import { dateI18n, getSettings as getDateSettings } from '@wordpress/date'; -import { useEffect, useRef, useState } from '@wordpress/element'; -import { Popover, DateTimePicker } from '@wordpress/components'; - -const name = 'core/time'; -const title = __( 'Date/Time' ); - -const DEFAULT_FORMAT = 'Y'; - -// Shamelessly copied from https://overreacted.io/making-setinterval-declarative-with-react-hooks/ -function useInterval( callback, delay ) { - const savedCallback = useRef(); - - // Remember the latest callback. - useEffect( () => { - savedCallback.current = callback; - }, [ callback ] ); - - // Set up the interval. - useEffect( () => { - function tick() { - savedCallback.current(); - } - if ( delay !== null ) { - const id = setInterval( tick, delay ); - return () => clearInterval( id ); - } - }, [ delay ] ); -} - -function useNow() { - const [ now, setNow ] = useState( new Date() ); - - useInterval( () => { - setNow( new Date() ); - }, 1000 ); - - return now; -} - -export const time = { - name, - title, - tagName: 'data', - className: null, - render: function Render( { attributes } ) { - const now = useNow(); - const { date = now, format } = attributes; - const dateSettings = getDateSettings(); - - return ( - - ); - }, - edit( { - isObjectActive, - value, - onChange, - onFocus, - contentRef, - activeObjectAttributes, - } ) { - function onClick() { - const newValue = insertObject( value, { - type: name, - attributes: { - format: DEFAULT_FORMAT, - }, - tagName: 'data', - } ); - newValue.start = newValue.end - 1; - onChange( newValue ); - onFocus(); - } - - return ( - <> - - { isObjectActive && ( - - ) } - - ); - }, -}; - -function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { - const { date, format } = activeObjectAttributes; - const popoverAnchor = useAnchor( { - editableContentElement: contentRef.current, - settings: time, - } ); - - return ( - - { - const newReplacements = value.replacements.slice(); - - newReplacements[ value.start ] = { - tagName: 'data', - type: name, - attributes: { - ...activeObjectAttributes, - format: newFormat, - }, - }; - - onChange( { - ...value, - replacements: newReplacements, - } ); - } } - /> - { - const newReplacements = value.replacements.slice(); - - newReplacements[ value.start ] = { - tagName: 'data', - type: name, - attributes: { - ...activeObjectAttributes, - date: newDate, - }, - }; - - onChange( { - ...value, - replacements: newReplacements, - } ); - } } - /> - - ); -} diff --git a/packages/rich-text/src/register-format-type.js b/packages/rich-text/src/register-format-type.js index 94761e6aaf5d7..2052761954bfa 100644 --- a/packages/rich-text/src/register-format-type.js +++ b/packages/rich-text/src/register-format-type.js @@ -78,18 +78,11 @@ export function registerFormatType( name, settings ) { return; } -<<<<<<< HEAD if ( settings.tagName !== 'data' ) { if ( settings.className === null ) { const formatTypeForBareElement = select( richTextStore ).getFormatTypeForBareElement( settings.tagName ); -======= - if ( settings.className === null && settings.tagName !== 'data' ) { - const formatTypeForBareElement = select( - richTextStore - ).getFormatTypeForBareElement( settings.tagName ); ->>>>>>> 405bbbda44 (wip) if ( formatTypeForBareElement &&