mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 11:55:03 +03:00
7b443d4b63
no issue The `config` service has been a source of confusion when writing with modern Ember patterns because it's use of the deprecated `ProxyMixin` forced all property access/setting to go via `.get()` and `.set()` whereas the rest of the system has mostly (there are a few other uses of ProxyObjects remaining) eliminated the use of the non-native get/set methods. - removed use of `ProxyMixin` in the `config` service by grabbing the API response after fetching and using `Object.defineProperty()` to add native getters/setters that pass through to a tracked object holding the API response data. Ember's autotracking automatically works across the native getters/setters so we can then use the service as if it was any other native object - updated all code to use `config.{attrName}` directly for getting/setting instead of `.get()` and `.set()` - removed unnecessary async around `config.availableTimezones` which wasn't making any async calls
124 lines
3.5 KiB
JavaScript
124 lines
3.5 KiB
JavaScript
import * as Sentry from '@sentry/ember';
|
|
import Component from '@glimmer/component';
|
|
import React, {Suspense} from 'react';
|
|
import {action} from '@ember/object';
|
|
import {inject as service} from '@ember/service';
|
|
|
|
class ErrorHandler extends React.Component {
|
|
state = {
|
|
hasError: false
|
|
};
|
|
|
|
static getDerivedStateFromError() {
|
|
return {hasError: true};
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<p className="koenig-react-editor-error">Loading has failed. Try refreshing the browser!</p>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
const fetchKoenig = function () {
|
|
let status = 'pending';
|
|
let response;
|
|
|
|
const fetchPackage = async () => {
|
|
if (window['@tryghost/koenig-lexical']) {
|
|
return window['@tryghost/koenig-lexical'];
|
|
}
|
|
|
|
// the manual specification of the protocol in the import template string is
|
|
// required to work around ember-auto-import complaining about an unknown dynamic import
|
|
// during the build step
|
|
const GhostAdmin = window.GhostAdmin || window.Ember.Namespace.NAMESPACES.find(ns => ns.name === 'ghost-admin');
|
|
const urlTemplate = GhostAdmin.__container__.lookup('service:config').editor?.url;
|
|
const urlVersion = GhostAdmin.__container__.lookup('service:config').editor?.version;
|
|
|
|
const url = new URL(urlTemplate.replace('{version}', urlVersion));
|
|
|
|
if (url.protocol === 'http:') {
|
|
await import(`http://${url.host}${url.pathname}`);
|
|
} else {
|
|
await import(`https://${url.host}${url.pathname}`);
|
|
}
|
|
|
|
return window['@tryghost/koenig-lexical'];
|
|
};
|
|
|
|
const suspender = fetchPackage().then(
|
|
(res) => {
|
|
status = 'success';
|
|
response = res;
|
|
},
|
|
(err) => {
|
|
status = 'error';
|
|
response = err;
|
|
}
|
|
);
|
|
|
|
const read = () => {
|
|
switch (status) {
|
|
case 'pending':
|
|
throw suspender;
|
|
case 'error':
|
|
throw response;
|
|
default:
|
|
return response;
|
|
}
|
|
};
|
|
|
|
return {read};
|
|
};
|
|
|
|
const editorResource = fetchKoenig();
|
|
|
|
const KoenigComposer = (props) => {
|
|
const {KoenigComposer: _KoenigComposer} = editorResource.read();
|
|
return <_KoenigComposer {...props} />;
|
|
};
|
|
|
|
const KoenigEditor = (props) => {
|
|
const {KoenigEditor: _KoenigEditor} = editorResource.read();
|
|
return <_KoenigEditor {...props} />;
|
|
};
|
|
|
|
export default class KoenigLexicalEditor extends Component {
|
|
@service config;
|
|
|
|
@action
|
|
onError(error) {
|
|
// ensure we're still showing errors in development
|
|
console.error(error); // eslint-disable-line
|
|
|
|
if (this.config.sentry_dsn) {
|
|
Sentry.captureException(error, {
|
|
tags: {
|
|
lexical: true
|
|
}
|
|
});
|
|
}
|
|
|
|
// don't rethrow, Lexical will attempt to gracefully recover
|
|
}
|
|
|
|
ReactComponent = () => {
|
|
return (
|
|
<div className={['koenig-react-editor', this.args.className].filter(Boolean).join(' ')}>
|
|
<ErrorHandler>
|
|
<Suspense fallback={<p className="koenig-react-editor-loading">Loading editor...</p>}>
|
|
<KoenigComposer initialEditorState={this.args.lexical} onError={this.onError}>
|
|
<KoenigEditor onChange={this.args.onChange} />
|
|
</KoenigComposer>
|
|
</Suspense>
|
|
</ErrorHandler>
|
|
</div>
|
|
);
|
|
};
|
|
}
|