@instructure/canvas-rce 5.1.2-alpha.7 → 5.2.0

package/canvas/lib/rce/plugins/instructure_record/plugin.js

@@ -10,6 +10,8 @@ var _formatMessage = _interopRequireDefault(require("../../../format-message.js"
 
 var _TrayController = _interopRequireDefault(require("./VideoOptionsTray/TrayController.js"));
 
+var _TrayController2 = _interopRequireDefault(require("./AudioOptionsTray/TrayController.js"));
+
 var _ContentSelection = require("../shared/ContentSelection.js");
 
 var _contentInsertionUtils = require("../../contentInsertionUtils.js");
@@ -31,7 +33,8 @@ var _contentInsertionUtils = require("../../contentInsertionUtils.js");
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-const trayController = new _TrayController.default();
+const videoTrayController = new _TrayController.default();
+const audioTrayController = new _TrayController2.default();
 const COURSE_PLUGIN_KEY = 'course_media';
 const USER_PLUGIN_KEY = 'user_media';
 const GROUP_PLUGIN_KEY = 'group_media';
@@ -159,7 +162,7 @@ tinymce.create('tinymce.plugins.InstructureRecord', {
     ed.ui.registry.addButton('instructure-video-options', {
       onAction() {
         // show the tray
-        trayController.showTrayForEditor(ed);
+        videoTrayController.showTrayForEditor(ed);
       },
 
       text: (0, _formatMessage.default)('Video Options'),
@@ -171,10 +174,25 @@ tinymce.create('tinymce.plugins.InstructureRecord', {
       predicate: _ContentSelection.isVideoElement,
       scope: 'node'
     });
+    ed.ui.registry.addButton('instructure-audio-options', {
+      onAction() {
+        audioTrayController.showTrayForEditor(ed);
+      },
+
+      text: (0, _formatMessage.default)('Audio Options'),
+      tooltip: (0, _formatMessage.default)('Show audio options')
+    });
+    ed.ui.registry.addContextToolbar('instructure-audio-toolbar', {
+      items: 'instructure-audio-options',
+      position: 'node',
+      predicate: _ContentSelection.isAudioElement,
+      scope: 'node'
+    });
   },
 
   remove(editor) {
-    trayController.hideTrayForEditor(editor);
+    audioTrayController.hideTrayForEditor(editor);
+    videoTrayController.hideTrayForEditor(editor);
   }
 
 }); // Register plugin

package/canvas/lib/rce/plugins/shared/ContentSelection.js

@@ -10,13 +10,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.asImageEmbed = asImageEmbed;
 exports.asLink = asLink;
 exports.asVideoElement = asVideoElement;
+exports.asAudioElement = asAudioElement;
 exports.getContentFromElement = getContentFromElement;
 exports.getContentFromEditor = getContentFromEditor;
 exports.getLinkContentFromEditor = getLinkContentFromEditor;
 exports.isFileLink = isFileLink;
 exports.isImageEmbed = isImageEmbed;
 exports.isVideoElement = isVideoElement;
-exports.findVideoPlayerIframe = findVideoPlayerIframe;
+exports.isAudioElement = isAudioElement;
+exports.findMediaPlayerIframe = findMediaPlayerIframe;
 exports.DISPLAY_AS_EMBED_DISABLED = exports.DISPLAY_AS_EMBED = exports.DISPLAY_AS_LINK = exports.NONE_TYPE = exports.TEXT_TYPE = exports.VIDEO_EMBED_TYPE = exports.IMAGE_EMBED_TYPE = exports.FILE_LINK_TYPE = exports.LINK_TYPE = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
@@ -27,6 +29,8 @@ var _contentInsertionUtils = require("../../contentInsertionUtils.js");
 
 var url = _interopRequireWildcard(require("url"));
 
+var _formatMessage = _interopRequireDefault(require("../../../format-message.js"));
+
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -126,7 +130,7 @@ function asLink($element, editor) {
 function asVideoElement($element) {
   var _$videoElem$parentEle;
 
-  const $videoElem = findVideoPlayerIframe($element);
+  const $videoElem = findMediaPlayerIframe($element);
 
   if (!isVideoElement($videoElem)) {
     return null;
@@ -139,6 +143,39 @@ function asVideoElement($element) {
   });
 }
 
+function asAudioElement($element) {
+  var _$element$parentEleme;
+
+  if (!$element) {
+    return null;
+  }
+
+  const $audioIframe = $element.tagName === 'IFRAME' ? $element : $element.firstElementChild;
+  const $tinymceIframeShim = $audioIframe.parentElement;
+  const title = ($audioIframe.getAttribute('title') || $tinymceIframeShim.getAttribute('data-mce-p-title') || '').replace((0, _formatMessage.default)('Video player for '), '');
+  const audioOptions = {
+    titleText: title,
+    id: ((_$element$parentEleme = $element.parentElement) === null || _$element$parentEleme === void 0 ? void 0 : _$element$parentEleme.getAttribute('data-mce-p-data-media-id')) || $element.getAttribute('data-mce-p-data-media-id')
+  };
+
+  if ($audioIframe.tagName === 'IFRAME') {
+    const audioDoc = $audioIframe.contentDocument;
+
+    try {
+      var _audioDoc$querySelect;
+
+      const trackSJson = (_audioDoc$querySelect = audioDoc.querySelector('[data-tracks]')) === null || _audioDoc$querySelect === void 0 ? void 0 : _audioDoc$querySelect.getAttribute('data-tracks');
+
+      if (trackSJson) {
+        audioOptions.tracks = JSON.parse(trackSJson);
+      } // eslint-disable-next-line no-empty
+
+    } catch (e) {}
+  }
+
+  return audioOptions;
+}
+
 function asText($element, editor) {
   const text = editor && editor.selection.getContent({
     format: 'text'
@@ -206,7 +243,7 @@ function isImageEmbed($element) {
   return !!asImageEmbed($element) && !$element.getAttribute('data-placeholder-for');
 }
 
-function isVideoElement($element) {
+function isMediaElement($element, mediaType) {
   var _tinymceIframeShim$fi;
 
   // the video is hosted in an iframe, but tinymce
@@ -228,15 +265,18 @@ function isVideoElement($element) {
   }
 
   const media_type = tinymceIframeShim.getAttribute('data-mce-p-data-media-type');
+  return media_type === mediaType;
+}
 
-  if (media_type !== 'video') {
-    return false;
-  }
+function isVideoElement($element) {
+  return isMediaElement($element, 'video');
+}
 
-  return true;
+function isAudioElement($element) {
+  return isMediaElement($element, 'audio');
 }
 
-function findVideoPlayerIframe(elem) {
+function findMediaPlayerIframe(elem) {
   var _elem$firstElementChi;
 
   if (elem.tagName === 'IFRAME') {

package/canvas/lib/rce/plugins/shared/DimensionsInput/index.js

@@ -25,6 +25,8 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiFlex = require("@instructure/ui-flex");
 
+var _uiRadioInput = require("@instructure/ui-radio-input");
+
 var _formatMessage = _interopRequireDefault(require("../../../../format-message.js"));
 
 var _DimensionInput = _interopRequireDefault(require("./DimensionInput.js"));
@@ -48,37 +50,84 @@ var _useDimensionsState = _interopRequireDefault(require("./useDimensionsState.j
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-function DimensionsInput(props) {
-  const dimensionsState = props.dimensionsState,
-        minHeight = props.minHeight,
-        minWidth = props.minWidth;
-  let messages = [{
+const getMessage = (dimensionsState, minWidth, minHeight, minPercentage) => {
+  let result = {
     text: (0, _formatMessage.default)('Aspect ratio will be preserved'),
     type: 'hint'
-  }];
+  };
 
-  if (!dimensionsState.isNumeric) {
-    messages = [{
+  if (dimensionsState.usePercentageUnits) {
+    if (!dimensionsState.isNumeric) {
+      result = {
+        text: (0, _formatMessage.default)('Percentage must be a number'),
+        type: 'error'
+      };
+    } else if (!dimensionsState.isAtLeastMinimums) {
+      result = {
+        text: (0, _formatMessage.default)('Must be at least {percentage}%', {
+          percentage: minPercentage
+        }),
+        type: 'error'
+      };
+    }
+  } else if (!dimensionsState.isNumeric) {
+    result = {
       text: (0, _formatMessage.default)('Width and height must be numbers'),
       type: 'error'
-    }];
+    };
   } else if (!dimensionsState.isAtLeastMinimums) {
-    messages = [{
+    result = {
       text: (0, _formatMessage.default)('Must be at least {width} x {height}px', {
         width: minWidth,
         height: minHeight
       }),
       type: 'error'
-    }];
+    };
   }
 
-  return /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
+  return result;
+};
+
+function DimensionsInput(props) {
+  const dimensionsState = props.dimensionsState,
+        minHeight = props.minHeight,
+        minWidth = props.minWidth,
+        minPercentage = props.minPercentage;
+  const message = getMessage(dimensionsState, minWidth, minHeight, minPercentage);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+    direction: "column"
+  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    padding: "small"
+  }, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInputGroup, {
+    "data-testid": "dimension-type",
+    name: "dimension-type",
+    description: (0, _formatMessage.default)('Dimension type'),
+    onChange: e => {
+      dimensionsState.setUsePercentageUnits(e.target.value === 'percentage');
+    },
+    value: dimensionsState.usePercentageUnits ? 'percentage' : 'pixels'
+  }, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+    label: (0, _formatMessage.default)('Pixels'),
+    value: "pixels"
+  }), /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+    label: (0, _formatMessage.default)('Percentage'),
+    value: "percentage"
+  })))), /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
     description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Dimensions')),
-    messages: messages
+    messages: [message]
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     alignItems: "start",
-    direction: "row"
-  }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    direction: "row",
+    "data-testid": "input-number-container"
+  }, dimensionsState.usePercentageUnits ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    shouldShrink: true,
+    shouldGrow: true
+  }, /*#__PURE__*/_react.default.createElement(_DimensionInput.default, {
+    dimensionState: dimensionsState.percentageState,
+    label: (0, _formatMessage.default)('Percentage')
+  })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+    padding: "x-small small"
+  }, "%")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
     shrink: true
   }, /*#__PURE__*/_react.default.createElement(_DimensionInput.default, {
     dimensionState: dimensionsState.widthState,
@@ -92,7 +141,7 @@ function DimensionsInput(props) {
     dimensionState: dimensionsState.heightState,
     label: (0, _formatMessage.default)('Height'),
     minValue: minHeight
-  }))));
+  }))))));
 }
 
 DimensionsInput.propTypes = {
@@ -103,12 +152,20 @@ DimensionsInput.propTypes = {
       setInputValue: _propTypes.func.isRequired
     }).isRequired,
     isNumeric: _propTypes.bool.isRequired,
+    usePercentageUnits: _propTypes.bool.isRequired,
+    setUsePercentageUnits: _propTypes.func.isRequired,
     widthState: (0, _propTypes.shape)({
       addOffset: _propTypes.func.isRequired,
       inputValue: _propTypes.string.isRequired,
       setInputValue: _propTypes.func.isRequired
+    }).isRequired,
+    percentageState: (0, _propTypes.shape)({
+      addOffset: _propTypes.func.isRequired,
+      inputValue: _propTypes.string.isRequired,
+      setInputValue: _propTypes.func.isRequired
     }).isRequired
   }),
   minHeight: _propTypes.number.isRequired,
-  minWidth: _propTypes.number.isRequired
+  minWidth: _propTypes.number.isRequired,
+  minPercentage: _propTypes.number.isRequired
 };

package/canvas/lib/rce/plugins/shared/DimensionsInput/useDimensionsState.js

@@ -56,20 +56,27 @@ function inputValueFor(initialNumber) {
 function useDimensionsState(initialDimensions, constraints) {
   const appliedHeight = initialDimensions.appliedHeight,
         appliedWidth = initialDimensions.appliedWidth,
+        appliedPercentage = initialDimensions.appliedPercentage,
         naturalHeight = initialDimensions.naturalHeight,
-        naturalWidth = initialDimensions.naturalWidth;
+        naturalWidth = initialDimensions.naturalWidth,
+        usePercentageUnits = initialDimensions.usePercentageUnits;
   const minHeight = constraints.minHeight,
-        minWidth = constraints.minWidth;
+        minWidth = constraints.minWidth,
+        minPercentage = constraints.minPercentage;
   const initialNumericValues = {
-    height: appliedHeight || naturalHeight,
-    width: appliedWidth || naturalWidth
+    height: usePercentageUnits ? naturalHeight : appliedHeight || naturalHeight,
+    width: usePercentageUnits ? naturalWidth : appliedWidth || naturalWidth,
+    percentage: appliedPercentage || 100
   };
 
   const _useState = (0, _react.useState)({
+    usePercentageUnits,
     inputHeight: inputValueFor(initialNumericValues.height),
     inputWidth: inputValueFor(initialNumericValues.width),
+    inputPercentage: inputValueFor(initialNumericValues.percentage),
     numericHeight: initialNumericValues.height,
-    numericWidth: initialNumericValues.width
+    numericWidth: initialNumericValues.width,
+    numericPercentage: initialNumericValues.percentage
   }),
         _useState2 = (0, _slicedToArray2.default)(_useState, 2),
         dimensions = _useState2[0],
@@ -77,11 +84,13 @@ function useDimensionsState(initialDimensions, constraints) {
 
   const currentNumericValues = {
     height: dimensions.numericHeight,
-    width: dimensions.numericWidth
+    width: dimensions.numericWidth,
+    percentage: dimensions.numericPercentage
   };
   const dimensionMinimums = {
     height: minHeight,
-    width: minWidth
+    width: minWidth,
+    percentage: minPercentage
   };
   const dimensionScaleFns = {
     height: _DimensionUtils.scaleForHeight,
@@ -89,40 +98,66 @@ function useDimensionsState(initialDimensions, constraints) {
   };
 
   function updateDimensions(attributes) {
-    setDimensions((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attributes), {}, {
+    setDimensions((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, dimensions), attributes), {}, {
       numericHeight: normalizedNumber(attributes.numericHeight),
-      numericWidth: normalizedNumber(attributes.numericWidth)
+      numericWidth: normalizedNumber(attributes.numericWidth),
+      numericPercentage: normalizedNumber(attributes.numericPercentage)
     }));
   }
 
-  function setNumericDimension(dimensionName, number) {
-    const scaleFn = dimensionScaleFns[dimensionName];
+  function scaleDimensions(dimensionName, number, scaleConstraints) {
+    let width, height, percentage;
+
+    if (dimensionName === 'percentage') {
+      width = naturalWidth;
+      height = naturalHeight;
+      percentage = number;
+    } else {
+      const scaleFn = dimensionScaleFns[dimensionName];
+      const scaledDimensions = scaleFn(naturalWidth, naturalHeight, number, scaleConstraints);
+      width = scaledDimensions.width;
+      height = scaledDimensions.height;
+      percentage = initialNumericValues.percentage;
+    }
 
-    const _scaleFn = scaleFn(naturalWidth, naturalHeight, number, constraints),
-          height = _scaleFn.height,
-          width = _scaleFn.width;
+    return {
+      width,
+      height,
+      percentage
+    };
+  }
+
+  function setNumericDimension(dimensionName, number) {
+    const _scaleDimensions = scaleDimensions(dimensionName, number, constraints),
+          height = _scaleDimensions.height,
+          width = _scaleDimensions.width,
+          percentage = _scaleDimensions.percentage;
 
     updateDimensions({
       numericHeight: height,
       numericWidth: width,
+      numericPercentage: percentage,
       inputHeight: inputValueFor(height),
-      inputWidth: inputValueFor(width)
+      inputWidth: inputValueFor(width),
+      inputPercentage: inputValueFor(percentage)
     });
   }
 
   function setDimensionValue(dimensionName, value) {
-    const scaleFn = dimensionScaleFns[dimensionName];
     const number = parseAsInteger(value);
 
-    const _scaleFn2 = scaleFn(naturalWidth, naturalHeight, number),
-          height = _scaleFn2.height,
-          width = _scaleFn2.width;
+    const _scaleDimensions2 = scaleDimensions(dimensionName, number),
+          height = _scaleDimensions2.height,
+          width = _scaleDimensions2.width,
+          percentage = _scaleDimensions2.percentage;
 
     updateDimensions({
       numericHeight: height,
       numericWidth: width,
+      numericPercentage: percentage,
       inputHeight: dimensionName === 'height' ? value : inputValueFor(height),
-      inputWidth: dimensionName === 'width' ? value : inputValueFor(width)
+      inputWidth: dimensionName === 'width' ? value : inputValueFor(width),
+      inputPercentage: dimensionName === 'percentage' ? value : inputValueFor(percentage)
     });
   }
 
@@ -163,15 +198,35 @@ function useDimensionsState(initialDimensions, constraints) {
     }
 
   };
-  const isNumeric = [dimensions.numericHeight, dimensions.numericWidth].every(Number.isFinite);
-  const isAtLeastMinimums = dimensions.numericHeight >= minHeight && dimensions.numericWidth >= minWidth;
+  const percentageState = {
+    inputValue: dimensions.inputPercentage,
+
+    addOffset(offset) {
+      offsetDimension('percentage', offset);
+    },
+
+    setInputValue(value) {
+      setDimensionValue('percentage', value);
+    }
+
+  };
+  const isNumeric = dimensions.usePercentageUnits ? Number.isFinite(dimensions.numericPercentage) : [dimensions.numericHeight, dimensions.numericWidth].every(Number.isFinite);
+  const isAtLeastMinimums = dimensions.usePercentageUnits ? dimensions.numericPercentage >= minPercentage : dimensions.numericHeight >= minHeight && dimensions.numericWidth >= minWidth;
   return {
-    height: dimensions.numericHeight,
+    widthState,
     heightState,
+    percentageState,
     isAtLeastMinimums,
     isNumeric,
-    isValid: isAtLeastMinimums && isNumeric,
     width: dimensions.numericWidth,
-    widthState
+    height: dimensions.numericHeight,
+    percentage: dimensions.numericPercentage,
+    usePercentageUnits: dimensions.usePercentageUnits,
+    setUsePercentageUnits: value => {
+      setDimensions((0, _objectSpread2.default)((0, _objectSpread2.default)({}, dimensions), {}, {
+        usePercentageUnits: value
+      }));
+    },
+    isValid: isAtLeastMinimums && isNumeric
   };
 }

package/canvas/lib/rce/plugins/shared/ImageOptionsForm.js

@@ -147,7 +147,8 @@ const ImageOptionsForm = ({
     dimensionsState: dimensionsState,
     disabled: displayAs !== 'embed',
     minHeight: _ImageEmbedOptions.MIN_HEIGHT,
-    minWidth: _ImageEmbedOptions.MIN_WIDTH
+    minWidth: _ImageEmbedOptions.MIN_WIDTH,
+    minPercentage: _ImageEmbedOptions.MIN_PERCENTAGE
   }))));
 };
 

package/canvas/lib/translations/locales/ar.js

@@ -285,6 +285,12 @@ const locale = {
   "details_98a31b68": {
     "message": "التفاصيل"
   },
+  "diamond_b8dfe7ae": {
+    "message": "معيّن"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "نوع البعد"
+  },
   "dimensions_45ddb7b7": {
     "message": "الأبعاد"
   },
@@ -597,6 +603,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "صورة متعددة الألوان"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "يجب أن يكون { percentage }% على الأقل"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "يجب أن تكون { width } x { height } بكسل على الأقل."
   },
@@ -663,9 +672,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "الفقرة"
   },
+  "pentagon_17d82ea3": {
+    "message": "خماسي"
+  },
   "people_b4ebb13c": {
     "message": "أشخاص"
   },
+  "percentage_34ab7c2c": {
+    "message": "نسبة مئوية"
+  },
+  "pixels_52ece7d1": {
+    "message": "بكسل"
+  },
   "posted_when_a578f5ab": {
     "message": "المنشور: { when }"
   },

package/canvas/lib/translations/locales/ca.js

@@ -285,6 +285,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Detalls"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diamant"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Tipus de dimensió"
+  },
   "dimensions_45ddb7b7": {
     "message": "Mides"
   },
@@ -597,6 +603,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Imatge multicolor"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Ha de ser un { percentage }% com a mínim"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Ha de ser de { width } × { height }píxels com a mínim"
   },
@@ -663,9 +672,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Paràgraf"
   },
+  "pentagon_17d82ea3": {
+    "message": "Pentàgon"
+  },
   "people_b4ebb13c": {
     "message": "Persones"
   },
+  "percentage_34ab7c2c": {
+    "message": "Percentatge"
+  },
+  "pixels_52ece7d1": {
+    "message": "Píxels"
+  },
   "posted_when_a578f5ab": {
     "message": "Publicat: { when }"
   },

package/canvas/lib/translations/locales/cy.js

@@ -285,6 +285,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Manylion"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diemwnt"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Math o ddimensiwn"
+  },
   "dimensions_45ddb7b7": {
     "message": "Dimensiynau"
   },
@@ -597,6 +603,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Delwedd mwy nag un lliw"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Yn gorfod bod yn { percentage }% o leiaf"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Yn gorfod bod o leiaf { width } x { height }px"
   },
@@ -663,9 +672,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Paragraff"
   },
+  "pentagon_17d82ea3": {
+    "message": "Pentagon"
+  },
   "people_b4ebb13c": {
     "message": "Pobl"
   },
+  "percentage_34ab7c2c": {
+    "message": "Canran"
+  },
+  "pixels_52ece7d1": {
+    "message": "Picseli"
+  },
   "posted_when_a578f5ab": {
     "message": "Wedi postio: { when }"
   },

package/canvas/lib/translations/locales/da-x-k12.js

@@ -285,6 +285,12 @@ const locale = {
   "details_98a31b68": {
     "message": "Nærmere oplysninger"
   },
+  "diamond_b8dfe7ae": {
+    "message": "Diamant"
+  },
+  "dimension_type_55c83e4e": {
+    "message": "Dimensionstype"
+  },
   "dimensions_45ddb7b7": {
     "message": "Dimensioner"
   },
@@ -576,6 +582,9 @@ const locale = {
   "loading_please_wait_d276220a": {
     "message": "Indlæser, vent venligst"
   },
+  "loading_preview_9f077aa1": {
+    "message": "Indlæser forhåndsvisning"
+  },
   "locked_762f138b": {
     "message": "Låst"
   },
@@ -597,6 +606,9 @@ const locale = {
   "multi_color_image_63d7372f": {
     "message": "Billede i flere farver"
   },
+  "must_be_at_least_percentage_22e373b6": {
+    "message": "Skal være mindst { percentage }%"
+  },
   "must_be_at_least_width_x_height_px_41dc825e": {
     "message": "Skal være mindst { width } x { height } px"
   },
@@ -663,9 +675,18 @@ const locale = {
   "paragraph_5e5ad8eb": {
     "message": "Paragraf"
   },
+  "pentagon_17d82ea3": {
+    "message": "Femkant"
+  },
   "people_b4ebb13c": {
     "message": "Deltagere"
   },
+  "percentage_34ab7c2c": {
+    "message": "Procentdel"
+  },
+  "pixels_52ece7d1": {
+    "message": "Pixels"
+  },
   "posted_when_a578f5ab": {
     "message": "Slået op: { when }"
   },