diff --git a/packages/react/components/Editor/components/MovablePattern.mjs b/packages/react/components/Editor/components/MovablePattern.mjs index 30f7d3369e0..14be1067672 100644 --- a/packages/react/components/Editor/components/MovablePattern.mjs +++ b/packages/react/components/Editor/components/MovablePattern.mjs @@ -13,7 +13,7 @@ export const MovablePattern = ({ update, fitImmovable = false, immovable = [], - t, + strings, }) => { const svgRef = useRef(null) if (!renderProps) return null @@ -91,7 +91,7 @@ export const MovablePattern = ({ stackName, stack, components, - t, + strings, movable: !immovable.includes(stackName), layout: layout.stacks[stackName], updateLayout, @@ -161,7 +161,7 @@ export const MovableStack = ({ stackName, stack, components, - t, + strings, movable = true, layout, updateLayout, @@ -345,7 +345,7 @@ export const MovableStack = ({ {[...stack.parts].map((part, key) => ( - + ))} {movable && ( diff --git a/packages/react/components/Editor/components/views/DraftView.mjs b/packages/react/components/Editor/components/views/DraftView.mjs index fe399378225..7c0a256a528 100644 --- a/packages/react/components/Editor/components/views/DraftView.mjs +++ b/packages/react/components/Editor/components/views/DraftView.mjs @@ -6,6 +6,9 @@ import { Null } from '@freesewing/react/components/Null' import { ZoomablePattern } from '../ZoomablePattern.mjs' import { PatternLayout } from '../PatternLayout.mjs' import { DraftErrorHandler } from './DraftErrorHandler.mjs' +import { i18nPlugin } from '@freesewing/plugin-i18n' +import { themePlugin } from '@freesewing/plugin-theme' +import { translateStrings } from '../../../Pattern/index.mjs' /** * The draft view allows users to tweak their pattern @@ -39,7 +42,13 @@ export const DraftView = ({ Design, state, update, config, plugins = [], PluginO /* * First, attempt to draft */ - const { pattern, failure, errors } = draft(Design, state.settings, plugins) + const { pattern, failure, errors } = draft(Design, state.settings, plugins, (pattern) => { + if (state.ui?.renderer === 'svg') { + const strings = bundlePatternTranslations(pattern.designConfig.data.id) + pattern.use(i18nPlugin, (t) => translateStrings([t], strings)) + pattern.use(themePlugin) + } + }) /* * Create object holding strings for translation diff --git a/packages/react/components/Editor/components/views/ExportView.mjs b/packages/react/components/Editor/components/views/ExportView.mjs index eb8f22bfe3a..389fbc02598 100644 --- a/packages/react/components/Editor/components/views/ExportView.mjs +++ b/packages/react/components/Editor/components/views/ExportView.mjs @@ -1,6 +1,8 @@ // Dependencies import { linkClasses, horFlexClasses, patternUrlFromState } from '@freesewing/utils' import { handleExport } from '../../lib/export/index.mjs' +import { translateStrings } from '../../../Pattern/index.mjs' +import { bundlePatternTranslations } from '../../lib/index.mjs' // Hooks import React, { useState } from 'react' // Components @@ -33,6 +35,8 @@ export const ExportView = (props) => { b: `${site}${patternUrlFromState(state, false)}`, } + const translations = bundlePatternTranslations(props.design) + const exportProps = { design: props.design, Design: props.Design, @@ -42,6 +46,7 @@ export const ExportView = (props) => { setFormat, startLoading: update.startLoading, stopLoading: update.stopLoading, + t: (string) => translateStrings([string], translations), } return ( diff --git a/packages/react/components/Editor/components/views/LayoutView.mjs b/packages/react/components/Editor/components/views/LayoutView.mjs index 7991c835ed0..750d115889b 100644 --- a/packages/react/components/Editor/components/views/LayoutView.mjs +++ b/packages/react/components/Editor/components/views/LayoutView.mjs @@ -3,7 +3,7 @@ import React from 'react' import { defaultPrintSettings } from '../../lib/export/index.mjs' import { tilerPlugin } from '../../lib/export/plugin-tiler.mjs' import { get } from '@freesewing/utils' -import { draft } from '../../lib/index.mjs' +import { bundlePatternTranslations, draft } from '../../lib/index.mjs' // Components import { PatternLayout } from '../PatternLayout.mjs' import { MovablePattern } from '../MovablePattern.mjs' @@ -25,6 +25,11 @@ export const LayoutView = (props) => { */ const { pattern, failure, errors } = draft(Design, settings, [tilerPlugin(pageSettings)]) + /* + * Create object holding strings for translation + */ + const strings = bundlePatternTranslations(pattern.designConfig.data.id) + const output = ( <> @@ -33,6 +38,7 @@ export const LayoutView = (props) => { update, renderProps: pattern.getRenderProps(), immovable: ['pages'], + strings: strings, state, }} /> diff --git a/packages/react/components/Editor/lib/editor.mjs b/packages/react/components/Editor/lib/editor.mjs index 4638a9a0c6f..7f750114c35 100644 --- a/packages/react/components/Editor/lib/editor.mjs +++ b/packages/react/components/Editor/lib/editor.mjs @@ -52,9 +52,10 @@ export const bundlePatternTranslations = (design) => { * @param {array} plugins - Any (extra) plugins to load into the pattern * @return {object} data - The drafted pattern, along with errors and failure data */ -export function draft(Design, settings, plugins = []) { +export function draft(Design, settings, plugins = [], pluginsHook = false) { const pattern = new Design(settings) for (const plugin of plugins) pattern.use(plugin) + if (pluginsHook) pluginsHook(pattern) const data = { // The pattern pattern, diff --git a/packages/react/components/Editor/lib/export/index.mjs b/packages/react/components/Editor/lib/export/index.mjs index 9663a1cfddd..151474fbec3 100644 --- a/packages/react/components/Editor/lib/export/index.mjs +++ b/packages/react/components/Editor/lib/export/index.mjs @@ -36,7 +36,7 @@ const themedPattern = (Design, settings, overwrite, format, t) => { // add the theme and translation to the pattern pattern.use(themePlugin, { stripped: format !== 'svg', skipGrid: ['pages'] }) - pattern.use(pluginI18n, (key) => key) + pattern.use(pluginI18n, t) return pattern }