動くけどフォーカスが外れるとclassが消えちゃう #50

App/Setup/Kses.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * @package snow-monkey-editor
+ * @author inc2734
+ * @license GPL-2.0+
+ */
+
+namespace Snow_Monkey\Plugin\Editor\App\Setup;
+
+class Kses {
+
+	/**
+	 * Constructor.
+	 */
+	public function __construct() {
+		add_filter( 'wp_kses_allowed_html', [ $this, '_wp_kses_allowed_html' ], 10, 2 );
+	}
+
+	/**
+	 * Add allowed attributes for br.
+	 *
+	 * @param array|string $context      Context to judge allowed tags by.
+	 * @param string       $context_type Context name.
+	 * @return array
+	 */
+	public function _wp_kses_allowed_html( $context, $context_type ) {
+		var_dump(1);exit;
+		switch ( $context_type ) {
+			case 'post':
+				$context['br'] = array_merge(
+					$context['br'],
+					[
+						'class' => true,
+					]
+				);
+				break;
+		}
+		return $context;
+	}
+}

snow-monkey-editor.php

@@ -60,6 +60,7 @@ public function _bootstrap() {
 		new App\Setup\CurrentUser();
 		new App\Setup\Endpoint();
 		new App\Setup\TextDomain();
+		new App\Setup\Kses();
 	}
 
 	/**

src/format/br/editor.js

@@ -0,0 +1,69 @@
+import { Icon } from '@wordpress/components';
+import { useState, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+import { SnowMonkeyToolbarButton } from '../component/snow-monkey-toolbar-button';
+import { default as InlineUI } from './inline';
+
+const name = 'snow-monkey-editor/br';
+const title = __( 'Break', 'snow-monkey-editor' );
+
+const Edit = ( props ) => {
+	const { value, onChange, isActive } = props;
+
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	const openModal = useCallback( () => setIsModalOpen( true ), [
+		setIsModalOpen,
+	] );
+
+	const closeModal = useCallback( () => setIsModalOpen( false ), [
+		setIsModalOpen,
+	] );
+
+	return (
+		<>
+			<SnowMonkeyToolbarButton
+				key={ isActive ? 'sme-br' : 'sme-br-not-active' }
+				name={ isActive ? 'sme-br' : undefined }
+				title={ title }
+				className="format-library-text-color-button sme-toolbar-button"
+				onClick={ openModal }
+				icon={
+					<>
+						<Icon icon="edit" />
+						{ isActive && (
+							<span
+								className="format-library-text-color-button__indicator sme-toolbar-button__indicator"
+								style={ { backgroundColor: '#cd162c' } }
+							/>
+						) }
+					</>
+				}
+			/>
+
+			{ isModalOpen && (
+				<InlineUI
+					name={ name }
+					value={ value }
+					isOpen={ isModalOpen }
+					onClose={ closeModal }
+					onChange={ onChange }
+				/>
+			) }
+		</>
+	);
+};
+
+export const settings = {
+	name,
+	title,
+	object: true,
+	tagName: 'br',
+	className: null,
+	attributes: {
+		className: 'class',
+		dataRichTextLineBreak: 'data-rich-text-line-break',
+	},
+	edit: Edit,
+};

src/format/br/inline.js

@@ -0,0 +1,112 @@
+import classnames from 'classnames';
+
+import { URLPopover } from '@wordpress/block-editor';
+import {
+	withSpokenMessages,
+	ToggleControl,
+	Button,
+} from '@wordpress/components';
+import { getRectangleFromRange } from '@wordpress/dom';
+import { useMemo, useState } from '@wordpress/element';
+import { insertObject } from '@wordpress/rich-text';
+import { __ } from '@wordpress/i18n';
+
+const PopoverAtLink = ( { isOpen, ...props } ) => {
+	const anchorRect = useMemo( () => {
+		// eslint-disable-next-line @wordpress/no-global-get-selection
+		const selection = window.getSelection();
+		const range =
+			selection.rangeCount > 0 ? selection.getRangeAt( 0 ) : null;
+		if ( ! range ) {
+			return;
+		}
+
+		if ( isOpen ) {
+			return getRectangleFromRange( range );
+		}
+
+		let element = range.startContainer;
+
+		// If the caret is right before the element, select the next element.
+		element = element.nextElementSibling || element;
+
+		while ( element.nodeType !== window.Node.ELEMENT_NODE ) {
+			element = element.parentNode;
+		}
+
+		const closest = element.closest( 'span' );
+		if ( closest ) {
+			return closest.getBoundingClientRect();
+		}
+	}, [] );
+
+	if ( ! anchorRect ) {
+		return null;
+	}
+
+	return <URLPopover anchorRect={ anchorRect } { ...props } />;
+};
+
+const InlineUI = ( { name, value, onClose, isOpen, onChange } ) => {
+	const [ isDisableSm, setIsDisableSm ] = useState( false );
+	const [ isDisableMd, setIsDisableMd ] = useState( false );
+	const [ isDisableLg, setIsDisableLg ] = useState( false );
+
+	return (
+		<PopoverAtLink
+			isOpen={ isOpen }
+			onClose={ onClose }
+			className="sme-popover components-inline-color-popover"
+		>
+			<form
+				onSubmit={ ( event ) => {
+					onChange(
+						insertObject( value, {
+							type: name,
+							attributes: {
+								dataRichTextLineBreak: 'true',
+								className: classnames( 'sme-br', {
+									'sme-hidden-sm': isDisableSm,
+									'sme-hidden-md': isDisableMd,
+									'sme-hidden-lg-up': isDisableLg,
+								} ),
+							},
+						} )
+					);
+					event.preventDefault();
+					onClose();
+				} }
+			>
+				<ToggleControl
+					label={ __(
+						'Disable on smartphone size',
+						'snow-monkey-forms'
+					) }
+					checked={ isDisableSm }
+					onChange={ () => setIsDisableSm( ! isDisableSm ) }
+				/>
+
+				<ToggleControl
+					label={ __(
+						'Disable on tablet size',
+						'snow-monkey-forms'
+					) }
+					checked={ isDisableMd }
+					onChange={ () => setIsDisableMd( ! isDisableMd ) }
+				/>
+
+				<ToggleControl
+					label={ __( 'Disable on PC size', 'snow-monkey-forms' ) }
+					checked={ isDisableLg }
+					onChange={ () => setIsDisableLg( ! isDisableLg ) }
+				/>
+
+				<Button isPrimary={ true } type="submit">
+					{ __( 'Insert', 'snow-monkey-editor' ) }
+				</Button>
+			</form>
+		</PopoverAtLink>
+	);
+};
+
+export default withSpokenMessages( InlineUI );

src/format/component/format-toolbar.js

@@ -58,6 +58,7 @@ const Edit = () => {
 						'sme-bg-color',
 						'sme-highlighter',
 						'sme-badge',
+						'sme-br',
 					].map( ( format ) => (
 						<Slot
 							name={ `SnowMonkey.ToolbarControls.${ format }` }

src/format/editor.js

@@ -9,6 +9,7 @@ import * as textColor from './text-color/editor';
 import * as bgColor from './bg-color/editor';
 import * as highlighter from './highlighter/editor';
 import * as badge from './badge/editor';
+import * as br from './br/editor';
 
 registerFormat( remove );
 registerFormat( fontSize );
@@ -17,3 +18,4 @@ registerFormat( textColor );
 registerFormat( bgColor );
 registerFormat( highlighter );
 registerFormat( badge );
+registerFormat( br );