{'Loading...'}
}
+ {hasMore && (
+ 
- {__('Fit to device', 'web-stories')}
-- {__( - 'All background images in your stories will be scaled to fill the screen for all mobile devices.', - 'web-stories' - )} -
-- {__( - 'Use this option if resizing the background image is not an issue.', - 'web-stories' - )} -
-
- {__('Do not fit', 'web-stories')}
-- {createInterpolateElement( - __( - 'Your story will be centered vertically on the device. The page’s background color will cover any additional space. For better visual results, set the page background color to match the color of the background image.', - 'web-stories' - ), - { - b: , - mark: , - } - )} -
-- {__( - 'Use this option if you need elements to be precisely aligned to the background.', - 'web-stories' - )} -
-/g, '').replace(/ $/, ''); +} + +export default exportHTML; diff --git a/assets/src/edit-story/components/richText/customImport.js b/assets/src/edit-story/components/richText/customImport.js new file mode 100644 index 000000000000..87dc321c0b24 --- /dev/null +++ b/assets/src/edit-story/components/richText/customImport.js @@ -0,0 +1,52 @@ +/* + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * External dependencies + */ +import { stateFromHTML } from 'draft-js-import-html'; + +/** + * Internal dependencies + */ +import getValidHTML from '../../utils/getValidHTML'; +import formatters from './formatters'; + +function customInlineFn(element, { Style }) { + const styleStrings = formatters + .map(({ elementToStyle }) => elementToStyle(element)) + .filter((style) => Boolean(style)); + + if (styleStrings.length === 0) { + return null; + } + + return Style(styleStrings); +} + +function importHTML(html) { + const htmlWithBreaks = (html || '') + // Re-insert manual line-breaks for empty lines + .replace(/\n(?=\n)/g, '\n
') + .split('\n') + .map((s) => { + return `
${getValidHTML(s)}
`; + }) + .join(''); + return stateFromHTML(htmlWithBreaks, { customInlineFn }); +} + +export default importHTML; diff --git a/assets/src/edit-story/components/richText/customInlineDisplay.js b/assets/src/edit-story/components/richText/customInlineDisplay.js new file mode 100644 index 000000000000..8e75fb6297a4 --- /dev/null +++ b/assets/src/edit-story/components/richText/customInlineDisplay.js @@ -0,0 +1,35 @@ +/* + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * Internal dependencies + */ +import formatters from './formatters'; +import { fauxStylesToCSS } from './fauxSelection'; + +function customInlineDisplay(styles) { + const stylesToCSSConverters = [ + ...formatters.map(({ stylesToCSS }) => stylesToCSS), + fauxStylesToCSS, + ]; + + return stylesToCSSConverters.reduce( + (css, stylesToCSS) => ({ ...css, ...stylesToCSS(styles) }), + {} + ); +} + +export default customInlineDisplay; diff --git a/assets/src/edit-story/components/richText/draftUtils.js b/assets/src/edit-story/components/richText/draftUtils.js new file mode 100644 index 000000000000..356c9a05b85d --- /dev/null +++ b/assets/src/edit-story/components/richText/draftUtils.js @@ -0,0 +1,75 @@ +/* + * Copyright 2020 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* Ignore reason: This is lifted from elsewhere - a combo of these basically: + * + * https://github.com/webdeveloperpr/draft-js-custom-styles/blob/f3e6b533905de8eee6da54f9727b5e5803d53fc4/src/index.js#L8-L52 + * https://github.com/facebook/draft-js/issues/602#issuecomment-584676405 + */ +/* istanbul ignore next */ + +/** + * This returns *an array of sets of styles* for all currently selected + * characters. + * + * If you have the following states with html tags representing styles + * and [] representing selection),you get the following returns: + * + *') - .split('\n') - .map((s) => { - return `
${draftMarkupToContent(s, bold)}
`; - }) - .join(''); - let state = EditorState.createWithContent(stateFromHTML(contentWithBreaks)); - if (clearContent) { - // If `clearContent` is specified, push the update to clear content so that - // it can be undone. - state = EditorState.push(state, stateFromHTML(''), 'remove-range'); - } - let selection; - if (selectAll) { - selection = getSelectionForAll(state.getCurrentContent()); - } else if (offset) { - selection = getSelectionForOffset(state.getCurrentContent(), offset); - } - if (selection) { - state = EditorState.forceSelection(state, selection); - } - return state; - }, [content, clearContent, selectAll, offset, bold]); - const [editorState, setEditorState] = useState(initialState); + const wrapperRef = useRef(null); + const textBoxRef = useRef(null); + const editorRef = useRef(null); + const contentRef = useRef(); const editorHeightRef = useRef(0); - // This is to allow the finalizing useEffect to *not* depend on editorState, - // as would otherwise be a lint error. - const lastKnownState = useRef(null); - - // This filters out illegal content (see `getFilteredState`) - // on paste and updates state accordingly. - // Furthermore it also sets initial selection if relevant. - const updateEditorState = useCallback( - (newEditorState) => { - const filteredState = getFilteredState(newEditorState, editorState); - lastKnownState.current = filteredState.getCurrentContent(); - setEditorState(filteredState); - }, - [editorState] - ); - - // Handle basic key commands such as bold, italic and underscore. - const handleKeyCommand = getHandleKeyCommand(updateEditorState); - // Make sure to allow the user to click in the text box while working on the text. const onClick = (evt) => { const editor = editorRef.current; // Refocus the editor if the container outside it is clicked. - if (!editor.editorContainer.contains(evt.target)) { + if (!editor.getNode().contains(evt.target)) { editor.focus(); } evt.stopPropagation(); }; + // Set focus when initially rendered. + useLayoutEffect(() => { + if (editorRef.current) { + editorRef.current.focus(); + } + }, []); + const updateContent = useCallback(() => { - const newState = lastKnownState.current; const newHeight = editorHeightRef.current; wrapperRef.current.style.height = ''; - if (newState) { + if (contentRef.current) { // Remove manual line breaks and remember to trim any trailing non-breaking space. - const properties = { - content: stateToHTML(lastKnownState.current, { - defaultBlockTag: null, - }) - .replace(//g, '') - .replace(/ $/, ''), - }; + const properties = { content: contentRef.current }; // Recalculate the new height and offset. if (newHeight) { const [dx, dy] = calcRotatedResizeOffset( @@ -245,43 +181,50 @@ function TextEdit({ y, ]); - // Update content for element on focus out. - useFocusOut(textBoxRef, updateContent, [updateContent]); - // Update content for element on unmount. useUnmount(updateContent); - // Set focus when initially rendered. - useLayoutEffect(() => { - editorRef.current.focus(); - }, []); - - // Remeasure the height on each content update. - useEffect(() => { + // A function to remeasure height + const handleResize = useCallback(() => { const wrapper = wrapperRef.current; const textBox = textBoxRef.current; editorHeightRef.current = textBox.offsetHeight; wrapper.style.height = `${editorHeightRef.current}px`; - }, [editorState, elementHeight, font, fontWeight, fontStyle, fontSize]); + }, []); + // Invoke on each content update. + const handleUpdate = useCallback( + (newContent) => { + contentRef.current = newContent; + handleResize(); + }, + [handleResize] + ); + // Also invoke if the raw element height ever changes + useEffect(handleResize, [ + elementHeight, + font, + fontWeight, + isItalic, + fontSize, + ]); useEffect(() => { maybeEnqueueFontStyle([ { font, fontWeight, - fontStyle, + isItalic, }, ]); - }, [font, fontWeight, fontStyle, maybeEnqueueFontStyle]); + }, [font, fontWeight, isItalic, maybeEnqueueFontStyle]); return (
- {backgroundFullbleedElements.map((element) => (
-
-
- {backgroundNonFullbleedElements.map((element) => (
+ {backgroundElements.map((element) => (
diff --git a/assets/src/edit-story/output/test/story.js b/assets/src/edit-story/output/test/story.js
index ab38ffae0b1d..8a12824dae46 100644
--- a/assets/src/edit-story/output/test/story.js
+++ b/assets/src/edit-story/output/test/story.js
@@ -199,9 +199,7 @@ describe('Story output', () => {
await expect(