mirror of
https://github.com/standardnotes/web.git
synced 2024-10-05 19:58:26 +03:00
refactor: component viewer (#2377)
This commit is contained in:
parent
3de6af445b
commit
c7fb0d2aca
@ -1,3 +1,5 @@
|
||||
// Recommended: https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/configs/recommended-type-checked.ts
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
@ -9,15 +11,25 @@ module.exports = {
|
||||
plugins: ['@typescript-eslint', 'prettier'],
|
||||
ignorePatterns: ['**/*.spec.ts'],
|
||||
rules: {
|
||||
'@typescript-eslint/restrict-template-expressions': 'error',
|
||||
'standard/no-callback-literal': 0, // Disable this as we have too many callbacks relying on literals
|
||||
'no-throw-literal': 0,
|
||||
camelcase: 'off',
|
||||
'sort-imports': 'off',
|
||||
'eol-last': 'error',
|
||||
'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
|
||||
'no-trailing-spaces': 'error',
|
||||
'prettier/prettier': [
|
||||
'error',
|
||||
{
|
||||
singleQuote: true,
|
||||
trailingComma: 'all',
|
||||
printWidth: 120,
|
||||
semi: false,
|
||||
},
|
||||
{
|
||||
usePrettierrc: false,
|
||||
},
|
||||
],
|
||||
'@typescript-eslint/no-explicit-any': 'warn',
|
||||
'@typescript-eslint/no-for-in-array': 'error',
|
||||
'@typescript-eslint/no-var-requires': 'error',
|
||||
'@typescript-eslint/prefer-as-const': 'error',
|
||||
'@typescript-eslint/no-array-constructor': 'error',
|
||||
'@typescript-eslint/no-duplicate-enum-values': 'error',
|
||||
'@typescript-eslint/restrict-template-expressions': 'error',
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'error',
|
||||
{
|
||||
@ -31,31 +43,26 @@ module.exports = {
|
||||
'@typescript-eslint/no-floating-promises': ['error'],
|
||||
'block-scoped-var': 'error',
|
||||
'comma-dangle': ['error', 'always-multiline'],
|
||||
curly: ['error', 'all'],
|
||||
'eol-last': 'error',
|
||||
'no-confusing-arrow': 'error',
|
||||
'no-inline-comments': 'warn',
|
||||
'no-invalid-this': 'error',
|
||||
'no-return-assign': 'warn',
|
||||
'no-console': ['warn', { allow: ['warn', 'error'] }],
|
||||
'no-constructor-return': 'error',
|
||||
'no-duplicate-imports': 'error',
|
||||
'no-inline-comments': 'warn',
|
||||
'no-invalid-this': 'error',
|
||||
'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
|
||||
'no-return-assign': 'warn',
|
||||
'no-self-compare': 'error',
|
||||
'no-console': ['warn', { allow: ['warn', 'error'] }],
|
||||
'no-throw-literal': 0,
|
||||
'no-trailing-spaces': 'error',
|
||||
'no-unmodified-loop-condition': 'error',
|
||||
'no-unused-private-class-members': 'error',
|
||||
'object-curly-spacing': ['error', 'always'],
|
||||
'sort-imports': 'off',
|
||||
'standard/no-callback-literal': 0, // Disable this as we have too many callbacks relying on literals
|
||||
camelcase: 'off',
|
||||
curly: ['error', 'all'],
|
||||
quotes: ['error', 'single', { avoidEscape: true }],
|
||||
semi: ['error', 'never'],
|
||||
'prettier/prettier': [
|
||||
'error',
|
||||
{
|
||||
singleQuote: true,
|
||||
trailingComma: 'all',
|
||||
printWidth: 120,
|
||||
semi: false,
|
||||
},
|
||||
{
|
||||
usePrettierrc: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
@ -723,7 +723,7 @@ EXTERNAL SOURCES:
|
||||
:path: "../node_modules/react-native/ReactCommon/yoga"
|
||||
|
||||
SPEC CHECKSUMS:
|
||||
boost: 57d2868c099736d80fcd648bf211b4431e51a558
|
||||
boost: a7c83b31436843459a1961bfd74b96033dc77234
|
||||
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
|
||||
DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
|
||||
FBLazyVector: 4cce221dd782d3ff7c4172167bba09d58af67ccb
|
||||
@ -743,7 +743,7 @@ SPEC CHECKSUMS:
|
||||
MMKV: 9c4663aa7ca255d478ff10f2f5cb7d17c1651ccd
|
||||
MMKVCore: 89f5c8a66bba2dcd551779dea4d412eeec8ff5bb
|
||||
OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
|
||||
RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
|
||||
RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda
|
||||
RCTRequired: a2faf4bad4e438ca37b2040cb8f7799baa065c18
|
||||
RCTTypeSafety: cb09f3e4747b6d18331a15eb05271de7441ca0b3
|
||||
React: 13109005b5353095c052f26af37413340ccf7a5d
|
||||
|
@ -15,7 +15,7 @@
|
||||
07CAB7702A618385008FE1EF /* ReceiveSharingIntent.m in Sources */ = {isa = PBXBuildFile; fileRef = 07CAB76F2A618385008FE1EF /* ReceiveSharingIntent.m */; };
|
||||
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
|
||||
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
|
||||
1C2EEB3B45F4EB07AC795C77 /* (null) in Frameworks */ = {isa = PBXBuildFile; };
|
||||
1C2EEB3B45F4EB07AC795C77 /* BuildFile in Frameworks */ = {isa = PBXBuildFile; };
|
||||
33BB1B14071EBE5978EBF3A8 /* libPods-StandardNotes-StandardNotesTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 04FCB5A3A3387CA3CFC82AA3 /* libPods-StandardNotes-StandardNotesTests.a */; };
|
||||
BC8DEA834BF198E8511F04FF /* libPods-StandardNotesDev.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 51F2D747BE02C2A1BCFEEFD1 /* libPods-StandardNotesDev.a */; };
|
||||
CD6592A9291EEFCC00C09DC6 /* StoreKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = CD6592A8291EEFCC00C09DC6 /* StoreKit.framework */; };
|
||||
@ -123,7 +123,7 @@
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
CD6592A9291EEFCC00C09DC6 /* StoreKit.framework in Frameworks */,
|
||||
1C2EEB3B45F4EB07AC795C77 /* (null) in Frameworks */,
|
||||
1C2EEB3B45F4EB07AC795C77 /* BuildFile in Frameworks */,
|
||||
DD3D1CE428EC1C8BA0C49211 /* libPods-StandardNotes.a in Frameworks */,
|
||||
);
|
||||
runOnlyForDeploymentPostprocessing = 0;
|
||||
|
@ -2,6 +2,7 @@ import {
|
||||
ComponentArea,
|
||||
ComponentPermission,
|
||||
EditorFeatureDescription,
|
||||
FindNativeFeature,
|
||||
NativeFeatureIdentifier,
|
||||
NoteType,
|
||||
ThemeDockIcon,
|
||||
@ -47,6 +48,10 @@ export class UIFeature<F extends UIFeatureDescriptionTypes> implements UIFeature
|
||||
throw new Error('Cannot cast item to feature description')
|
||||
}
|
||||
|
||||
get isNativeFeature(): boolean {
|
||||
return FindNativeFeature(this.featureIdentifier) !== undefined
|
||||
}
|
||||
|
||||
get uniqueIdentifier(): NativeFeatureIdentifier | Uuid {
|
||||
if (isNativeFeature(this.item)) {
|
||||
const nativeFeature = NativeFeatureIdentifier.create(this.item.identifier)
|
||||
|
@ -17,6 +17,7 @@ export interface UIFeatureInterface<F extends UIFeatureDescriptionTypes> {
|
||||
get isThemeComponent(): boolean
|
||||
get asComponent(): ComponentInterface
|
||||
get asFeatureDescription(): F
|
||||
get isNativeFeature(): boolean
|
||||
get uniqueIdentifier(): NativeFeatureIdentifier | Uuid
|
||||
get featureIdentifier(): string
|
||||
get noteType(): NoteType
|
||||
|
@ -458,8 +458,7 @@ export class ComponentViewer implements ComponentViewerInterface {
|
||||
}
|
||||
this.log('Send message to component', this.componentOrFeature, 'message: ', message)
|
||||
|
||||
let origin = this.options.url
|
||||
if (!origin || !this.window) {
|
||||
if (!this.window) {
|
||||
if (essential) {
|
||||
void this.services.alerts.alert(
|
||||
`Standard Notes is trying to communicate with ${this.componentOrFeature.displayName}, ` +
|
||||
@ -469,13 +468,11 @@ export class ComponentViewer implements ComponentViewerInterface {
|
||||
return
|
||||
}
|
||||
|
||||
if (!origin.startsWith('http') && !origin.startsWith('file')) {
|
||||
/* Native extension running in web, prefix current host */
|
||||
origin = window.location.href + origin
|
||||
}
|
||||
/** Because iframes do not allow-same-origin, their origin is `null`, and so we can't target their explicit origin */
|
||||
const nullOrigin = '*'
|
||||
|
||||
/* Mobile messaging requires json */
|
||||
this.window.postMessage(this.isMobile ? JSON.stringify(message) : message, origin)
|
||||
this.window.postMessage(this.isMobile ? JSON.stringify(message) : message, nullOrigin)
|
||||
}
|
||||
|
||||
private responseItemsByRemovingPrivateProperties<T extends OutgoingItemMessagePayload | IncomingComponentItemPayload>(
|
||||
|
@ -7,7 +7,7 @@ import {
|
||||
ComponentInterface,
|
||||
SubscriptionManagerEvent,
|
||||
} from '@standardnotes/snjs'
|
||||
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import OfflineRestricted from '@/Components/ComponentView/OfflineRestricted'
|
||||
import UrlMissing from '@/Components/ComponentView/UrlMissing'
|
||||
@ -178,6 +178,37 @@ const IframeFeatureView: FunctionComponent<Props> = ({ onLoad, componentViewer,
|
||||
}
|
||||
}, [application, requestReload, componentViewer, uiFeature])
|
||||
|
||||
const sandboxAttributes = useMemo(() => {
|
||||
const attributes = [
|
||||
'allow-scripts',
|
||||
'allow-top-navigation-by-user-activation',
|
||||
'allow-popups',
|
||||
'allow-modals',
|
||||
'allow-forms',
|
||||
'allow-downloads',
|
||||
]
|
||||
|
||||
if (uiFeature.isNativeFeature) {
|
||||
attributes.push('allow-popups-to-escape-sandbox')
|
||||
}
|
||||
|
||||
if (application.isNativeMobileWeb()) {
|
||||
/**
|
||||
* Native mobile web serves native components through the file:// protocol.
|
||||
* Native mobile web also does not use localStorage, unlike the web app.
|
||||
* So, components served through the file:// (precompiled editors) will be treated
|
||||
* as same origin as the parent app, but will not have meaningful access.
|
||||
*
|
||||
* Third party components will have a non-file:// origin, and thus don't need this attribute.
|
||||
*/
|
||||
if (uiFeature.isNativeFeature) {
|
||||
attributes.push('allow-same-origin')
|
||||
}
|
||||
}
|
||||
|
||||
return attributes
|
||||
}, [application, uiFeature])
|
||||
|
||||
return (
|
||||
<>
|
||||
{hasIssueLoading && (
|
||||
@ -208,7 +239,7 @@ const IframeFeatureView: FunctionComponent<Props> = ({ onLoad, componentViewer,
|
||||
data-component-viewer-id={componentViewer.identifier}
|
||||
frameBorder={0}
|
||||
src={componentViewer.url || ''}
|
||||
sandbox="allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms allow-downloads"
|
||||
sandbox={sandboxAttributes.join(' ')}
|
||||
>
|
||||
Loading
|
||||
</iframe>
|
||||
|
@ -89,8 +89,8 @@ const U2FAuthIframe = () => {
|
||||
if (!error) {
|
||||
return
|
||||
}
|
||||
setError(error.toString())
|
||||
console.error(error.toString())
|
||||
setError(JSON.stringify(error))
|
||||
console.error(error)
|
||||
}
|
||||
}, [source, username, apiHost])
|
||||
|
||||
|
@ -17,6 +17,9 @@ module.exports = (env, argv) => {
|
||||
},
|
||||
plugins: [new ReactRefreshWebpackPlugin()],
|
||||
devServer: {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
},
|
||||
hot: true,
|
||||
static: './dist',
|
||||
port,
|
||||
|
Loading…
Reference in New Issue
Block a user