Add support for defining settings on images, such as size and alignment.
+ +The syntax for this is `{ width=
Here’s how to include an image with alt text and a title:
We also support some extra syntax for setting the width, height and alignment of images. You can provide pixels (200/200px), or a percentage (50%), for the width/height. The alignment can be either left or right, with images being centered by default. These settings are all optional.
Use horizontal rules to break up long sections:
Rich transformations are also applied:
diff --git a/index.js b/index.js index b66b60f..a98370a 100644 --- a/index.js +++ b/index.js @@ -50,6 +50,7 @@ const safeObject = require('./util/safe_object'); * @property {false} [fence_pre_attrs] Disable fence pre attributes. * @property {false|import('./modifiers/fence_classes').FenceClassesOptions} [fence_classes] Disable fence class filtering, or set options for the feature. * @property {false|import('./modifiers/heading_id').HeadingIdOptions} [heading_id] Disable Ids on headings, or set options for the feature. + * @property {false|import('./modifiers/image_settings').ImageSettingsOptions} [image_settings] Disable image settings syntax, or set options for the feature. * @property {false|import('./modifiers/prismjs').PrismJsOptions} [prismjs] Disable Prism highlighting, or set options for the feature. */ @@ -172,6 +173,10 @@ module.exports = (md, options) => { md.use(require('./modifiers/heading_id'), safeObject(optsObj.heading_id)); } + if (optsObj.image_settings !== false) { + md.use(require('./modifiers/image_settings'), safeObject(optsObj.image_settings)); + } + if (optsObj.prismjs !== false) { md.use(require('./modifiers/prismjs'), safeObject(optsObj.prismjs)); } diff --git a/modifiers/image_settings.js b/modifiers/image_settings.js new file mode 100644 index 0000000..319e440 --- /dev/null +++ b/modifiers/image_settings.js @@ -0,0 +1,131 @@ +/* +Copyright 2023 DigitalOcean + +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 + http://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. +*/ + +'use strict'; + +/** + * @module modifiers/image_settings + */ + +const safeObject = require('../util/safe_object'); +const regexEscape = require('../util/regex_escape'); + +/** + * @typedef {Object} ImageSettingsOptions + * @property {string[]} [sizeUnits=['', 'px', '%']] Image size units to allow. + */ + +/** + * Add support for defining settings on images, such as size and alignment. + * + * The syntax for this is `{ width=
');
+});
+
+it('handles an image with a size (width + height)', () => {
+ expect(md.renderInline('{ width=100 height=200 }')).toBe('');
+});
+
+it('handles an image with a size (width + height) with a unit', () => {
+ expect(md.renderInline('{ width=100px height=200px }')).toBe('');
+});
+
+it('handles an image with a size (width only)', () => {
+ expect(md.renderInline('{ width=100 }')).toBe('');
+});
+
+it('handles an image with a size (height only)', () => {
+ expect(md.renderInline('{ height=200 }')).toBe('');
+});
+
+it('handles an image with alt text, a title and size', () => {
+ expect(md.renderInline('{ width=100 height=200 }')).toBe('');
+});
+
+it('handles an image with an invalid size (no value)', () => {
+ expect(md.renderInline('{ width= }')).toBe('{ width= }');
+});
+
+it('handles an image with an invalid size (bad unit)', () => {
+ expect(md.renderInline('{ width=10em height=20em }')).toBe('{ width=10em height=20em }');
+});
+
+it('handles an image with an alignment', () => {
+ expect(md.renderInline('{ align=left }')).toBe('');
+});
+
+it('handles an image with an invalid alignment', () => {
+ expect(md.renderInline('{ align=top }')).toBe('{ align=top }');
+});
+
+it('handles an image with a size and alignment', () => {
+ expect(md.renderInline('{ width=100 height=200 align=left }')).toBe('');
+});
+
+it('handles an image with a size and alignment in a different order', () => {
+ expect(md.renderInline('{ height=200 align=left width=100 }')).toBe('');
+});
+
+it('handles an image with an invalid setting', () => {
+ expect(md.renderInline('{ hello=world }')).toBe('{ hello=world }');
+});
+
+it('handles an image with a valid and invalid settings', () => {
+ expect(md.renderInline('{ width=100 hello=world }')).toBe('{ width=100 hello=world }');
+});
+
+const mdNoUnit = require('markdown-it')().use(require('./image_settings'), { sizeUnits: [ '' ] });
+
+it('handles an image with a size (width + height) with no unit, with no units allowed', () => {
+ expect(mdNoUnit.renderInline('{ width=100 height=200 }')).toBe('');
+});
+
+it('handles an image with a size (width + height) with a unit, with no units allowed', () => {
+ expect(mdNoUnit.renderInline('{ width=100px height=200px }')).toBe('{ width=100px height=200px }');
+});
+
+const mdCustomUnit = require('markdown-it')().use(require('./image_settings'), { sizeUnits: [ 'em' ] });
+
+it('handles an image with a size (width + height) with no unit, with a custom unit allowed', () => {
+ expect(mdCustomUnit.renderInline('{ width=100 height=200 }')).toBe('{ width=100 height=200 }');
+});
+
+it('handles an image with a size (width + height) with a custom unit, with a custom unit allowed', () => {
+ expect(mdCustomUnit.renderInline('{ width=100em height=200em }')).toBe('');
+});
diff --git a/styles/_images.scss b/styles/_images.scss
index dfa1a8e..fb80f57 100644
--- a/styles/_images.scss
+++ b/styles/_images.scss
@@ -1,5 +1,5 @@
/*
-Copyright 2022 DigitalOcean
+Copyright 2023 DigitalOcean
Licensed under the Apache License, Version 2.0 (the "License") !default;
you may not use this file except in compliance with the License.
@@ -26,11 +26,33 @@ figure {
max-width: 100%;
}
+img {
+ &[align="left"] {
+ float: unset;
+ margin-left: 0;
+ }
+
+ &[align="right"] {
+ float: unset;
+ margin-right: 0;
+ }
+}
+
// Figures
figure {
overflow: hidden;
padding: 1rem;
+ &:has(img[align="left"]) {
+ margin-left: 0;
+ width: fit-content;
+ }
+
+ &:has(img[align="right"]) {
+ margin-right: 0;
+ width: fit-content;
+ }
+
img {
border: none;
border-radius: 0;
diff --git a/util/regex_escape.js b/util/regex_escape.js
new file mode 100644
index 0000000..df9667c
--- /dev/null
+++ b/util/regex_escape.js
@@ -0,0 +1,25 @@
+/*
+Copyright 2023 DigitalOcean
+
+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
+ http://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.
+*/
+
+'use strict';
+
+/**
+ * Escape a string for use in a RegExp.
+ *
+ * @param {string} string String to escape.
+ * @returns {string}
+ */
+module.exports = string => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string