Skip to content

Commit

Permalink
Merge pull request #254 from KevinBatdorf/add-sidebar-slotfil
Browse files Browse the repository at this point in the history
Add pluggable sidebar slots
  • Loading branch information
KevinBatdorf authored Nov 12, 2023
2 parents fb1861f + 99d8dbe commit 94bad7d
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 81 deletions.
2 changes: 2 additions & 0 deletions code-block-pro.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
* @package kevinbatdorf
*/

defined('ABSPATH') or die;

add_action('init', function () {
register_block_type(__DIR__ . '/build');
wp_set_script_translations('kevinbatdorf/code-block-pro', 'code-block-pro');
Expand Down
2 changes: 2 additions & 0 deletions readme.txt
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,8 @@ Themes are rendered inside the editor as you type or make changes, so the code b

== Changelog ==

- Feature: Add pluggable sidebar slots to allow others to add functionality

= 1.24.1 - 2023-10-11 =
- Tweak: Line numbers width is now calculated based on the longest line number * font width
- Compatibility: Checks whether the user has permission via the browser instead of passing it in from the server (other plugins were intercepting this check)
Expand Down
42 changes: 6 additions & 36 deletions src/editor/Edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import {
useLayoutEffect,
useRef,
} from '@wordpress/element';
import { escapeHTML } from '@wordpress/escape-html';
import { applyFilters } from '@wordpress/hooks';
import { decodeEntities } from '@wordpress/html-entities';
import { sprintf, __ } from '@wordpress/i18n';
import Editor from 'react-simple-code-editor';
import { useCanEditHTML } from '../hooks/useCanEditHTML';
Expand All @@ -16,6 +14,7 @@ import { useTheme } from '../hooks/useTheme';
import { useLanguageStore } from '../state/language';
import { AttributesPropsAndSetter, Lang } from '../types';
import { parseJSONArrayWithRanges } from '../util/arrayHelpers';
import { decode, encode } from '../util/code';
import { computeLineHighlightColor } from '../util/colors';
import { getTextWidth } from '../util/fonts';
import { getEditorLanguage } from '../util/languages';
Expand Down Expand Up @@ -54,7 +53,7 @@ export const Edit = ({
const [editorLeftPadding, setEditorLeftPadding] = useState(0);
const codeAreaRef = useRef<HTMLDivElement>(null);
const handleChange = (code: string) =>
setAttributes({ code: encode(code) });
setAttributes({ code: encode(code, attributes) });
const { previousLanguage } = useLanguageStore();
const { highlighter, error, loading } = useTheme({
theme,
Expand All @@ -63,35 +62,6 @@ export const Edit = ({
const hasFooter = footerType && footerType !== 'none';
useDefaults({ attributes, setAttributes });

const decode = useCallback(
(code: string) => {
if (useDecodeURI) {
try {
// Here for bw compatability
return decodeURIComponent(code);
} catch (e) {
return code;
}
}
return decodeEntities(code);
},
[useDecodeURI],
);
const encode = useCallback(
(code: string) => {
if (useDecodeURI) {
try {
// Here for bw compatability
return encodeURIComponent(code);
} catch (e) {
return code;
}
}
return escapeHTML(code);
},
[useDecodeURI],
);

const getHighlights = useCallback(() => {
if (!enableHighlighting) return [];
return parseJSONArrayWithRanges(lineHighlights, startingLineNumber).map(
Expand Down Expand Up @@ -123,7 +93,7 @@ export const Edit = ({
if (!highlighter) return;
const l = (language ?? previousLanguage) as Lang | 'ansi';
const lang = getEditorLanguage(l);
const c = decode(code);
const c = decode(code, { useDecodeURI });
const lineOptions = [
...getHighlights(),
...getBlurs(),
Expand Down Expand Up @@ -164,7 +134,7 @@ export const Edit = ({
lineBlurs,
getBlurs,
getHighlights,
decode,
useDecodeURI,
]);

useLayoutEffect(() => {
Expand Down Expand Up @@ -241,7 +211,7 @@ export const Edit = ({
</div>
)}
<Editor
value={decode(code)}
value={decode(code, { useDecodeURI })}
onValueChange={handleChange}
// eslint-disable-next-line jsx-a11y/no-autofocus -- Only autofocus in the unintended case that there is no code (e.g. on initial insert)
autoFocus={!code}
Expand Down Expand Up @@ -272,7 +242,7 @@ export const Edit = ({
}
highlight={(code: string) =>
highlighter
?.codeToHtml(decode(code), {
?.codeToHtml(decode(code, { useDecodeURI }), {
lang: getEditorLanguage(
language ?? previousLanguage,
),
Expand Down
29 changes: 29 additions & 0 deletions src/editor/components/SlotFactory.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { createSlotFill } from '@wordpress/components';
import { useMemo } from '@wordpress/element';
import { AttributesPropsAndSetter } from '../../types';
import { decode, encode } from '../../util/code';
import { languages } from '../../util/languages';

export const SlotFactory = ({
name,
attributes,
setAttributes,
}: AttributesPropsAndSetter & { name: string }) => {
const { Slot } = useMemo(() => {
return createSlotFill(name);
}, [name]);
return (
<Slot
fillProps={{
attributes,
setAttributes,
languages,
getCode: () => decode(attributes.code, attributes),
setCode: (code: string) =>
setAttributes({
code: encode(code, attributes),
}),
}}
/>
);
};
106 changes: 61 additions & 45 deletions src/editor/controls/Sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
import { FooterSelect } from '../components/FooterSelect';
import { HeaderSelect } from '../components/HeaderSelect';
import { HeightPanel } from '../components/HeightPanel';
import { SlotFactory } from '../components/SlotFactory';
import { ThemesPanel } from '../components/ThemesPanel';
import { MissingPermissionsTip } from '../components/misc/MissingPermissions';
import { BlurControl } from './BlurControl';
Expand Down Expand Up @@ -79,6 +80,11 @@ export const SidebarControls = ({

return (
<InspectorControls>
<SlotFactory
name="CodeBlockPro.Sidebar.Start"
attributes={attributes}
setAttributes={setAttributes}
/>
<PanelBody
title={__('Language', 'code-block-pro')}
initialOpen={bringAttention === 'language-select'}>
Expand Down Expand Up @@ -128,49 +134,11 @@ export const SidebarControls = ({
</BaseControl>
</div>
</PanelBody>
<PanelBody
title={__('Line Settings', 'code-block-pro')}
initialOpen={false}>
<div className="code-block-pro-editor">
<BaseControl id="code-block-pro-show-line-numbers">
<CheckboxControl
data-cy="show-line-numbers"
label={__('Line numbers', 'code-block-pro')}
help={__(
'Enable line numbers and set a starting number.',
'code-block-pro',
)}
checked={attributes.lineNumbers}
onChange={(lineNumbers) => {
setAttributes({ lineNumbers });
updateThemeHistory({ lineNumbers });
}}
/>
{attributes.lineNumbers && (
<BaseControl id="code-block-pro-line-number-start">
<TextControl
id="code-block-pro-line-number-start"
spellCheck={false}
autoComplete="off"
label={__('Start from', 'code-block-pro')}
onChange={(startingLineNumber) => {
setAttributes({ startingLineNumber });
}}
value={attributes.startingLineNumber}
/>
</BaseControl>
)}
</BaseControl>
<HighlightingControl
attributes={attributes}
setAttributes={setAttributes}
/>
<BlurControl
attributes={attributes}
setAttributes={setAttributes}
/>
</div>
</PanelBody>
<ThemesPanel
bringAttentionToThemes={bringAttention === 'theme-select'}
attributes={attributes}
setAttributes={setAttributes}
/>
<PanelBody
title={__('Header Type', 'code-block-pro')}
initialOpen={false}>
Expand Down Expand Up @@ -256,8 +224,51 @@ export const SidebarControls = ({
}}
/>
</PanelBody>
<ThemesPanel
bringAttentionToThemes={bringAttention === 'theme-select'}
<PanelBody
title={__('Line Settings', 'code-block-pro')}
initialOpen={false}>
<div className="code-block-pro-editor">
<BaseControl id="code-block-pro-show-line-numbers">
<CheckboxControl
data-cy="show-line-numbers"
label={__('Line numbers', 'code-block-pro')}
help={__(
'Enable line numbers and set a starting number.',
'code-block-pro',
)}
checked={attributes.lineNumbers}
onChange={(lineNumbers) => {
setAttributes({ lineNumbers });
updateThemeHistory({ lineNumbers });
}}
/>
{attributes.lineNumbers && (
<BaseControl id="code-block-pro-line-number-start">
<TextControl
id="code-block-pro-line-number-start"
spellCheck={false}
autoComplete="off"
label={__('Start from', 'code-block-pro')}
onChange={(startingLineNumber) => {
setAttributes({ startingLineNumber });
}}
value={attributes.startingLineNumber}
/>
</BaseControl>
)}
</BaseControl>
<HighlightingControl
attributes={attributes}
setAttributes={setAttributes}
/>
<BlurControl
attributes={attributes}
setAttributes={setAttributes}
/>
</div>
</PanelBody>
<SlotFactory
name="CodeBlockPro.Sidebar.Middle"
attributes={attributes}
setAttributes={setAttributes}
/>
Expand Down Expand Up @@ -395,6 +406,11 @@ export const SidebarControls = ({
/>
</BaseControl>
</PanelBody>
<SlotFactory
name="CodeBlockPro.Sidebar.End"
attributes={attributes}
setAttributes={setAttributes}
/>
</InspectorControls>
);
};
27 changes: 27 additions & 0 deletions src/util/code.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { escapeHTML } from '@wordpress/escape-html';
import { decodeEntities } from '@wordpress/html-entities';
import { Attributes } from '../types';

export const encode = (code: string, { useDecodeURI }: Partial<Attributes>) => {
if (useDecodeURI) {
try {
// Here for bw compatability
return encodeURIComponent(code);
} catch (e) {
return code;
}
}
return escapeHTML(code);
};

export const decode = (code: string, { useDecodeURI }: Partial<Attributes>) => {
if (useDecodeURI) {
try {
// Here for bw compatability
return decodeURIComponent(code);
} catch (e) {
return code;
}
}
return decodeEntities(code);
};

0 comments on commit 94bad7d

Please sign in to comment.