@atlaskit/ads-mcp 0.20.3 → 0.20.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/entry-points/analyze-a11y.js +40 -0
- package/dist/cjs/entry-points/get-a11y-guidelines.js +26 -0
- package/dist/cjs/entry-points/get-all-components.js +19 -0
- package/dist/cjs/entry-points/get-all-icons.js +19 -0
- package/dist/cjs/entry-points/get-all-tokens.js +19 -0
- package/dist/cjs/entry-points/get-atlaskit-components.js +19 -0
- package/dist/cjs/entry-points/get-guidelines.js +26 -0
- package/dist/cjs/entry-points/get-lint-rules.js +26 -0
- package/dist/cjs/entry-points/i18n-conversion.js +26 -0
- package/dist/cjs/entry-points/migration-guides.js +26 -0
- package/dist/cjs/entry-points/plan.js +26 -0
- package/dist/cjs/entry-points/search-atlaskit-components.js +26 -0
- package/dist/cjs/entry-points/search-components.js +26 -0
- package/dist/cjs/entry-points/search-icons.js +26 -0
- package/dist/cjs/entry-points/search-tokens.js +26 -0
- package/dist/cjs/entry-points/suggest-a11y-fixes.js +26 -0
- package/dist/cjs/helpers/agent.js +9 -0
- package/dist/cjs/helpers/clean-query.js +10 -0
- package/dist/cjs/helpers/index.js +14 -11
- package/dist/cjs/helpers/send-operational-event.js +56 -0
- package/dist/cjs/helpers/validation.js +2 -2
- package/dist/cjs/helpers/zod-to-json-schema.js +12 -0
- package/dist/cjs/index.js +127 -85
- package/dist/cjs/tools/analyze-a11y/analyze-a11y-input-schema.js +13 -0
- package/dist/cjs/tools/analyze-a11y/analyze-a11y-localhost-input-schema.js +13 -0
- package/dist/cjs/tools/analyze-a11y/analyze-a11y-tool.js +242 -0
- package/dist/cjs/tools/analyze-a11y/analyze-localhost-a11y-tool.js +214 -0
- package/dist/cjs/tools/analyze-a11y/generate-ads-fix-for-violation.js +32 -0
- package/dist/cjs/tools/analyze-a11y/list-analyze-a11y-tool.js +20 -0
- package/dist/cjs/tools/analyze-a11y/list-analyze-localhost-a11y-tool.js +20 -0
- package/dist/cjs/tools/get-a11y-guidelines/get-a11y-guidelines-input-schema.js +14 -0
- package/dist/cjs/tools/get-a11y-guidelines/{index.js → get-a11y-guidelines-tool.js} +1 -18
- package/dist/cjs/tools/get-a11y-guidelines/list-get-a11y-guidelines-tool.js +22 -0
- package/dist/cjs/tools/get-all-components/{index.js → get-all-components-tool.js} +1 -15
- package/dist/cjs/tools/get-all-components/list-get-all-components-tool.js +22 -0
- package/dist/cjs/tools/get-all-icons/{index.js → get-all-icons-tool.js} +1 -15
- package/dist/cjs/tools/get-all-icons/list-get-all-icons-tool.js +22 -0
- package/dist/cjs/tools/get-all-tokens/{index.js → get-all-tokens-tool.js} +1 -18
- package/dist/cjs/tools/get-all-tokens/list-get-all-tokens-tool.js +23 -0
- package/dist/cjs/tools/get-atlaskit-components/atlaskit-components.codegen.js +1944 -0
- package/dist/cjs/tools/get-atlaskit-components/get-atlaskit-components-tool.js +40 -0
- package/dist/cjs/tools/get-atlaskit-components/list-get-atlaskit-components-tool.js +22 -0
- package/dist/cjs/tools/get-guidelines/get-guidelines-input-schema.js +11 -0
- package/dist/cjs/tools/get-guidelines/{index.js → get-guidelines-tool.js} +3 -20
- package/dist/cjs/tools/get-guidelines/list-get-guidelines-tool.js +22 -0
- package/dist/cjs/tools/get-lint-rules/get-lint-rules-input-schema.js +14 -0
- package/dist/cjs/tools/get-lint-rules/{index.js → get-lint-rules-tool.js} +3 -21
- package/dist/cjs/tools/get-lint-rules/list-get-lint-rules-tool.js +22 -0
- package/dist/cjs/tools/i18n-conversion/i18n-conversion-input-schema.js +12 -0
- package/dist/cjs/tools/i18n-conversion/i18n-conversion-tool.js +33 -0
- package/dist/cjs/tools/i18n-conversion/{index.js → list-i18n-conversion-tool.js} +5 -33
- package/dist/cjs/tools/migration-guides/get-available-migration-ids.js +22 -0
- package/dist/cjs/tools/migration-guides/get-available-migrations-description.js +25 -0
- package/dist/cjs/tools/migration-guides/list-migration-guides-tool.js +23 -0
- package/dist/cjs/tools/migration-guides/migration-guides-input-schema.js +17 -0
- package/dist/cjs/tools/migration-guides/{index.js → migration-guides-tool.js} +3 -24
- package/dist/cjs/tools/migration-guides/migration-registry.js +5 -2
- package/dist/cjs/tools/migration-guides/migrations/onboarding-jira-spotlight.js +29 -0
- package/dist/cjs/tools/migration-guides/migrations/onboarding-multi-step.js +23 -0
- package/dist/cjs/tools/migration-guides/migrations/onboarding-single-step.js +23 -0
- package/dist/cjs/tools/migration-guides/migrations/onboarding-with-motion.js +23 -0
- package/dist/cjs/tools/plan/list-plan-tool.js +22 -0
- package/dist/cjs/tools/plan/plan-input-schema.js +16 -0
- package/dist/cjs/tools/plan/{index.js → plan-tool.js} +28 -36
- package/dist/cjs/tools/search-atlaskit-components/list-search-atlaskit-components-tool.js +22 -0
- package/dist/cjs/tools/search-atlaskit-components/search-atlaskit-components-input-schema.js +11 -0
- package/dist/cjs/tools/search-atlaskit-components/search-atlaskit-components-tool.js +114 -0
- package/dist/cjs/tools/search-components/list-search-components-tool.js +22 -0
- package/dist/cjs/tools/search-components/search-components-input-schema.js +13 -0
- package/dist/cjs/tools/search-components/{index.js → search-components-tool.js} +3 -19
- package/dist/cjs/tools/search-icons/list-search-icons-tool.js +22 -0
- package/dist/cjs/tools/search-icons/search-icons-input-schema.js +13 -0
- package/dist/cjs/tools/search-icons/{index.js → search-icons-tool.js} +3 -19
- package/dist/cjs/tools/search-tokens/list-search-tokens-tool.js +22 -0
- package/dist/cjs/tools/search-tokens/search-tokens-input-schema.js +13 -0
- package/dist/cjs/tools/search-tokens/{index.js → search-tokens-tool.js} +3 -19
- package/dist/cjs/tools/suggest-a11y-fixes/list-suggest-a11y-fixes-tool.js +22 -0
- package/dist/cjs/tools/suggest-a11y-fixes/suggest-a11y-fixes-input-schema.js +15 -0
- package/dist/cjs/tools/suggest-a11y-fixes/{index.js → suggest-a11y-fixes-tool.js} +1 -22
- package/dist/es2019/entry-points/analyze-a11y.js +5 -0
- package/dist/es2019/entry-points/get-a11y-guidelines.js +3 -0
- package/dist/es2019/entry-points/get-all-components.js +2 -0
- package/dist/es2019/entry-points/get-all-icons.js +2 -0
- package/dist/es2019/entry-points/get-all-tokens.js +2 -0
- package/dist/es2019/entry-points/get-atlaskit-components.js +2 -0
- package/dist/es2019/entry-points/get-guidelines.js +3 -0
- package/dist/es2019/entry-points/get-lint-rules.js +3 -0
- package/dist/es2019/entry-points/i18n-conversion.js +3 -0
- package/dist/es2019/entry-points/migration-guides.js +3 -0
- package/dist/es2019/entry-points/plan.js +3 -0
- package/dist/es2019/entry-points/search-atlaskit-components.js +3 -0
- package/dist/es2019/entry-points/search-components.js +3 -0
- package/dist/es2019/entry-points/search-icons.js +3 -0
- package/dist/es2019/entry-points/search-tokens.js +3 -0
- package/dist/es2019/entry-points/suggest-a11y-fixes.js +3 -0
- package/dist/es2019/helpers/agent.js +3 -0
- package/dist/es2019/helpers/clean-query.js +2 -0
- package/dist/es2019/helpers/index.js +2 -7
- package/dist/es2019/helpers/send-operational-event.js +49 -0
- package/dist/es2019/helpers/validation.js +1 -1
- package/dist/es2019/helpers/zod-to-json-schema.js +6 -0
- package/dist/es2019/index.js +138 -92
- package/dist/es2019/tools/analyze-a11y/analyze-a11y-input-schema.js +7 -0
- package/dist/es2019/tools/analyze-a11y/analyze-a11y-localhost-input-schema.js +7 -0
- package/dist/es2019/tools/analyze-a11y/analyze-a11y-tool.js +212 -0
- package/dist/es2019/tools/analyze-a11y/analyze-localhost-a11y-tool.js +163 -0
- package/dist/es2019/tools/analyze-a11y/generate-ads-fix-for-violation.js +26 -0
- package/dist/es2019/tools/analyze-a11y/list-analyze-a11y-tool.js +21 -0
- package/dist/es2019/tools/analyze-a11y/list-analyze-localhost-a11y-tool.js +23 -0
- package/dist/es2019/tools/get-a11y-guidelines/get-a11y-guidelines-input-schema.js +7 -0
- package/dist/es2019/tools/get-a11y-guidelines/get-a11y-guidelines-tool.js +34 -0
- package/dist/es2019/tools/get-a11y-guidelines/list-get-a11y-guidelines-tool.js +23 -0
- package/dist/es2019/tools/get-all-components/get-all-components-tool.js +12 -0
- package/dist/es2019/tools/get-all-components/{index.js → list-get-all-components-tool.js} +1 -12
- package/dist/es2019/tools/get-all-icons/get-all-icons-tool.js +10 -0
- package/dist/es2019/tools/get-all-icons/{index.js → list-get-all-icons-tool.js} +2 -11
- package/dist/es2019/tools/get-all-tokens/get-all-tokens-tool.js +13 -0
- package/dist/es2019/tools/get-all-tokens/{index.js → list-get-all-tokens-tool.js} +2 -15
- package/dist/es2019/tools/get-atlaskit-components/atlaskit-components.codegen.js +1938 -0
- package/dist/es2019/tools/get-atlaskit-components/get-atlaskit-components-tool.js +14 -0
- package/dist/es2019/tools/get-atlaskit-components/list-get-atlaskit-components-tool.js +21 -0
- package/dist/es2019/tools/get-guidelines/get-guidelines-input-schema.js +5 -0
- package/dist/es2019/tools/get-guidelines/get-guidelines-tool.js +55 -0
- package/dist/es2019/tools/get-guidelines/{index.js → list-get-guidelines-tool.js} +2 -59
- package/dist/es2019/tools/get-lint-rules/get-lint-rules-input-schema.js +7 -0
- package/dist/es2019/tools/get-lint-rules/{index.js → get-lint-rules-tool.js} +1 -28
- package/dist/es2019/tools/get-lint-rules/list-get-lint-rules-tool.js +24 -0
- package/dist/es2019/tools/i18n-conversion/i18n-conversion-input-schema.js +5 -0
- package/dist/es2019/tools/i18n-conversion/i18n-conversion-tool.js +11 -0
- package/dist/es2019/tools/i18n-conversion/{index.js → list-i18n-conversion-tool.js} +2 -14
- package/dist/es2019/tools/migration-guides/get-available-migration-ids.js +17 -0
- package/dist/es2019/tools/migration-guides/get-available-migrations-description.js +18 -0
- package/dist/es2019/tools/migration-guides/list-migration-guides-tool.js +25 -0
- package/dist/es2019/tools/migration-guides/migration-guides-input-schema.js +10 -0
- package/dist/es2019/tools/migration-guides/migration-guides-tool.js +39 -0
- package/dist/es2019/tools/migration-guides/migration-registry.js +4 -1
- package/dist/es2019/tools/migration-guides/migrations/onboarding-jira-spotlight.js +230 -0
- package/dist/es2019/tools/migration-guides/migrations/onboarding-multi-step.js +179 -0
- package/dist/es2019/tools/migration-guides/migrations/onboarding-single-step.js +120 -0
- package/dist/es2019/tools/migration-guides/migrations/onboarding-with-motion.js +120 -0
- package/dist/es2019/tools/plan/list-plan-tool.js +47 -0
- package/dist/es2019/tools/plan/plan-input-schema.js +9 -0
- package/dist/es2019/tools/plan/plan-tool.js +111 -0
- package/dist/es2019/tools/search-atlaskit-components/list-search-atlaskit-components-tool.js +19 -0
- package/dist/es2019/tools/search-atlaskit-components/search-atlaskit-components-input-schema.js +5 -0
- package/dist/es2019/tools/search-atlaskit-components/search-atlaskit-components-tool.js +84 -0
- package/dist/es2019/tools/search-components/list-search-components-tool.js +19 -0
- package/dist/es2019/tools/search-components/search-components-input-schema.js +6 -0
- package/dist/es2019/tools/search-components/{index.js → search-components-tool.js} +2 -21
- package/dist/es2019/tools/search-icons/list-search-icons-tool.js +25 -0
- package/dist/es2019/tools/search-icons/search-icons-input-schema.js +6 -0
- package/dist/es2019/tools/search-icons/{index.js → search-icons-tool.js} +2 -27
- package/dist/es2019/tools/search-tokens/list-search-tokens-tool.js +25 -0
- package/dist/es2019/tools/search-tokens/search-tokens-input-schema.js +6 -0
- package/dist/es2019/tools/search-tokens/{index.js → search-tokens-tool.js} +2 -27
- package/dist/es2019/tools/suggest-a11y-fixes/list-suggest-a11y-fixes-tool.js +25 -0
- package/dist/es2019/tools/suggest-a11y-fixes/suggest-a11y-fixes-input-schema.js +8 -0
- package/dist/es2019/tools/suggest-a11y-fixes/{index.js → suggest-a11y-fixes-tool.js} +0 -30
- package/dist/esm/entry-points/analyze-a11y.js +5 -0
- package/dist/esm/entry-points/get-a11y-guidelines.js +3 -0
- package/dist/esm/entry-points/get-all-components.js +2 -0
- package/dist/esm/entry-points/get-all-icons.js +2 -0
- package/dist/esm/entry-points/get-all-tokens.js +2 -0
- package/dist/esm/entry-points/get-atlaskit-components.js +2 -0
- package/dist/esm/entry-points/get-guidelines.js +3 -0
- package/dist/esm/entry-points/get-lint-rules.js +3 -0
- package/dist/esm/entry-points/i18n-conversion.js +3 -0
- package/dist/esm/entry-points/migration-guides.js +3 -0
- package/dist/esm/entry-points/plan.js +3 -0
- package/dist/esm/entry-points/search-atlaskit-components.js +3 -0
- package/dist/esm/entry-points/search-components.js +3 -0
- package/dist/esm/entry-points/search-icons.js +3 -0
- package/dist/esm/entry-points/search-tokens.js +3 -0
- package/dist/esm/entry-points/suggest-a11y-fixes.js +3 -0
- package/dist/esm/helpers/agent.js +3 -0
- package/dist/esm/helpers/clean-query.js +4 -0
- package/dist/esm/helpers/index.js +2 -9
- package/dist/esm/helpers/send-operational-event.js +52 -0
- package/dist/esm/helpers/validation.js +1 -1
- package/dist/esm/helpers/zod-to-json-schema.js +6 -0
- package/dist/esm/index.js +65 -23
- package/dist/esm/tools/analyze-a11y/analyze-a11y-input-schema.js +7 -0
- package/dist/esm/tools/analyze-a11y/analyze-a11y-localhost-input-schema.js +7 -0
- package/dist/esm/tools/analyze-a11y/analyze-a11y-tool.js +235 -0
- package/dist/esm/tools/analyze-a11y/analyze-localhost-a11y-tool.js +207 -0
- package/dist/esm/tools/analyze-a11y/generate-ads-fix-for-violation.js +26 -0
- package/dist/esm/tools/analyze-a11y/list-analyze-a11y-tool.js +14 -0
- package/dist/esm/tools/analyze-a11y/list-analyze-localhost-a11y-tool.js +14 -0
- package/dist/esm/tools/get-a11y-guidelines/get-a11y-guidelines-input-schema.js +7 -0
- package/dist/esm/tools/get-a11y-guidelines/{index.js → get-a11y-guidelines-tool.js} +0 -17
- package/dist/esm/tools/get-a11y-guidelines/list-get-a11y-guidelines-tool.js +16 -0
- package/dist/esm/tools/get-all-components/{index.js → get-all-components-tool.js} +0 -15
- package/dist/esm/tools/get-all-components/list-get-all-components-tool.js +16 -0
- package/dist/esm/tools/get-all-icons/{index.js → get-all-icons-tool.js} +0 -15
- package/dist/esm/tools/get-all-icons/list-get-all-icons-tool.js +16 -0
- package/dist/esm/tools/get-all-tokens/{index.js → get-all-tokens-tool.js} +0 -17
- package/dist/esm/tools/get-all-tokens/list-get-all-tokens-tool.js +17 -0
- package/dist/esm/tools/get-atlaskit-components/atlaskit-components.codegen.js +1938 -0
- package/dist/esm/tools/get-atlaskit-components/get-atlaskit-components-tool.js +32 -0
- package/dist/esm/tools/get-atlaskit-components/list-get-atlaskit-components-tool.js +16 -0
- package/dist/esm/tools/get-guidelines/get-guidelines-input-schema.js +5 -0
- package/dist/esm/tools/get-guidelines/{index.js → get-guidelines-tool.js} +1 -19
- package/dist/esm/tools/get-guidelines/list-get-guidelines-tool.js +16 -0
- package/dist/esm/tools/get-lint-rules/get-lint-rules-input-schema.js +7 -0
- package/dist/esm/tools/get-lint-rules/{index.js → get-lint-rules-tool.js} +1 -19
- package/dist/esm/tools/get-lint-rules/list-get-lint-rules-tool.js +15 -0
- package/dist/esm/tools/i18n-conversion/i18n-conversion-input-schema.js +5 -0
- package/dist/esm/tools/i18n-conversion/i18n-conversion-tool.js +26 -0
- package/dist/esm/tools/i18n-conversion/{index.js → list-i18n-conversion-tool.js} +3 -30
- package/dist/esm/tools/migration-guides/get-available-migration-ids.js +17 -0
- package/dist/esm/tools/migration-guides/get-available-migrations-description.js +20 -0
- package/dist/esm/tools/migration-guides/list-migration-guides-tool.js +17 -0
- package/dist/esm/tools/migration-guides/migration-guides-input-schema.js +10 -0
- package/dist/esm/tools/migration-guides/{index.js → migration-guides-tool.js} +1 -23
- package/dist/esm/tools/migration-guides/migration-registry.js +4 -1
- package/dist/esm/tools/migration-guides/migrations/onboarding-jira-spotlight.js +23 -0
- package/dist/esm/tools/migration-guides/migrations/onboarding-multi-step.js +17 -0
- package/dist/esm/tools/migration-guides/migrations/onboarding-single-step.js +17 -0
- package/dist/esm/tools/migration-guides/migrations/onboarding-with-motion.js +17 -0
- package/dist/esm/tools/plan/list-plan-tool.js +16 -0
- package/dist/esm/tools/plan/plan-input-schema.js +9 -0
- package/dist/esm/tools/plan/{index.js → plan-tool.js} +24 -32
- package/dist/esm/tools/search-atlaskit-components/list-search-atlaskit-components-tool.js +16 -0
- package/dist/esm/tools/search-atlaskit-components/search-atlaskit-components-input-schema.js +5 -0
- package/dist/esm/tools/search-atlaskit-components/search-atlaskit-components-tool.js +107 -0
- package/dist/esm/tools/search-components/list-search-components-tool.js +16 -0
- package/dist/esm/tools/search-components/search-components-input-schema.js +6 -0
- package/dist/esm/tools/search-components/{index.js → search-components-tool.js} +2 -18
- package/dist/esm/tools/search-icons/list-search-icons-tool.js +16 -0
- package/dist/esm/tools/search-icons/search-icons-input-schema.js +6 -0
- package/dist/esm/tools/search-icons/{index.js → search-icons-tool.js} +2 -18
- package/dist/esm/tools/search-tokens/list-search-tokens-tool.js +16 -0
- package/dist/esm/tools/search-tokens/search-tokens-input-schema.js +6 -0
- package/dist/esm/tools/search-tokens/{index.js → search-tokens-tool.js} +2 -18
- package/dist/esm/tools/suggest-a11y-fixes/list-suggest-a11y-fixes-tool.js +16 -0
- package/dist/esm/tools/suggest-a11y-fixes/suggest-a11y-fixes-input-schema.js +8 -0
- package/dist/esm/tools/suggest-a11y-fixes/{index.js → suggest-a11y-fixes-tool.js} +0 -21
- package/dist/types/entry-points/analyze-a11y.d.ts +5 -0
- package/dist/types/entry-points/get-a11y-guidelines.d.ts +3 -0
- package/dist/types/entry-points/get-all-components.d.ts +2 -0
- package/dist/types/entry-points/get-all-icons.d.ts +2 -0
- package/dist/types/entry-points/get-all-tokens.d.ts +2 -0
- package/dist/types/entry-points/get-atlaskit-components.d.ts +2 -0
- package/dist/types/entry-points/get-guidelines.d.ts +3 -0
- package/dist/types/entry-points/get-lint-rules.d.ts +3 -0
- package/dist/types/entry-points/i18n-conversion.d.ts +3 -0
- package/dist/types/entry-points/migration-guides.d.ts +3 -0
- package/dist/types/entry-points/plan.d.ts +3 -0
- package/dist/types/entry-points/search-atlaskit-components.d.ts +3 -0
- package/dist/types/entry-points/search-components.d.ts +3 -0
- package/dist/types/entry-points/search-icons.d.ts +3 -0
- package/dist/types/entry-points/search-tokens.d.ts +3 -0
- package/dist/types/entry-points/suggest-a11y-fixes.d.ts +3 -0
- package/dist/types/helpers/agent.d.ts +3 -0
- package/dist/types/helpers/clean-query.d.ts +1 -0
- package/dist/types/helpers/index.d.ts +2 -4
- package/dist/types/helpers/send-operational-event.d.ts +13 -0
- package/dist/types/helpers/zod-to-json-schema.d.ts +3 -0
- package/dist/types/tools/analyze-a11y/analyze-a11y-input-schema.d.ts +17 -0
- package/dist/types/tools/analyze-a11y/analyze-a11y-localhost-input-schema.d.ts +17 -0
- package/dist/types/tools/analyze-a11y/analyze-a11y-tool.d.ts +8 -0
- package/dist/types/tools/analyze-a11y/analyze-localhost-a11y-tool.d.ts +8 -0
- package/dist/types/tools/analyze-a11y/generate-ads-fix-for-violation.d.ts +1 -0
- package/dist/types/tools/analyze-a11y/list-analyze-a11y-tool.d.ts +2 -0
- package/dist/types/tools/analyze-a11y/list-analyze-localhost-a11y-tool.d.ts +2 -0
- package/dist/types/tools/get-a11y-guidelines/get-a11y-guidelines-input-schema.d.ts +8 -0
- package/dist/types/tools/get-a11y-guidelines/get-a11y-guidelines-tool.d.ts +8 -0
- package/dist/types/tools/get-a11y-guidelines/list-get-a11y-guidelines-tool.d.ts +2 -0
- package/dist/types/tools/get-all-components/{index.d.ts → get-all-components-tool.d.ts} +0 -2
- package/dist/types/tools/get-all-components/list-get-all-components-tool.d.ts +2 -0
- package/dist/{types-ts4.5/tools/get-all-icons/index.d.ts → types/tools/get-all-icons/get-all-icons-tool.d.ts} +0 -2
- package/dist/types/tools/get-all-icons/list-get-all-icons-tool.d.ts +2 -0
- package/dist/types/tools/get-all-tokens/{index.d.ts → get-all-tokens-tool.d.ts} +0 -2
- package/dist/types/tools/get-all-tokens/list-get-all-tokens-tool.d.ts +2 -0
- package/dist/types/tools/get-atlaskit-components/atlaskit-components.codegen.d.ts +10 -0
- package/dist/types/tools/get-atlaskit-components/get-atlaskit-components-tool.d.ts +6 -0
- package/dist/types/tools/get-atlaskit-components/list-get-atlaskit-components-tool.d.ts +2 -0
- package/dist/types/tools/get-guidelines/get-guidelines-input-schema.d.ts +5 -0
- package/dist/types/tools/get-guidelines/get-guidelines-tool.d.ts +8 -0
- package/dist/types/tools/get-guidelines/list-get-guidelines-tool.d.ts +2 -0
- package/dist/types/tools/get-lint-rules/get-lint-rules-input-schema.d.ts +6 -0
- package/dist/types/tools/get-lint-rules/get-lint-rules-tool.d.ts +4 -0
- package/dist/types/tools/get-lint-rules/{index.d.ts → list-get-lint-rules-tool.d.ts} +0 -8
- package/dist/types/tools/i18n-conversion/i18n-conversion-input-schema.d.ts +8 -0
- package/dist/types/tools/i18n-conversion/i18n-conversion-tool.d.ts +8 -0
- package/dist/types/tools/i18n-conversion/list-i18n-conversion-tool.d.ts +2 -0
- package/dist/types/tools/migration-guides/get-available-migration-ids.d.ts +12 -0
- package/dist/types/tools/migration-guides/get-available-migrations-description.d.ts +13 -0
- package/dist/types/tools/migration-guides/list-migration-guides-tool.d.ts +2 -0
- package/dist/types/tools/migration-guides/migration-guides-input-schema.d.ts +11 -0
- package/dist/types/tools/migration-guides/migration-guides-tool.d.ts +8 -0
- package/dist/types/tools/migration-guides/migrations/onboarding-jira-spotlight.d.ts +2 -0
- package/dist/types/tools/migration-guides/migrations/onboarding-multi-step.d.ts +2 -0
- package/dist/types/tools/migration-guides/migrations/onboarding-single-step.d.ts +2 -0
- package/dist/types/tools/migration-guides/migrations/onboarding-with-motion.d.ts +2 -0
- package/dist/types/tools/plan/list-plan-tool.d.ts +2 -0
- package/dist/types/tools/plan/{index.d.ts → plan-input-schema.d.ts} +3 -15
- package/dist/types/tools/plan/plan-tool.d.ts +15 -0
- package/dist/types/tools/search-atlaskit-components/list-search-atlaskit-components-tool.d.ts +2 -0
- package/dist/types/tools/search-atlaskit-components/search-atlaskit-components-input-schema.d.ts +11 -0
- package/dist/types/tools/search-atlaskit-components/search-atlaskit-components-tool.d.ts +4 -0
- package/dist/types/tools/search-components/list-search-components-tool.d.ts +2 -0
- package/dist/{types-ts4.5/tools/search-components/index.d.ts → types/tools/search-components/search-components-input-schema.d.ts} +0 -3
- package/dist/types/tools/search-components/search-components-tool.d.ts +4 -0
- package/dist/types/tools/search-icons/list-search-icons-tool.d.ts +2 -0
- package/dist/{types-ts4.5/tools/search-icons/index.d.ts → types/tools/search-icons/search-icons-input-schema.d.ts} +0 -3
- package/dist/types/tools/search-icons/search-icons-tool.d.ts +4 -0
- package/dist/types/tools/search-tokens/list-search-tokens-tool.d.ts +2 -0
- package/dist/types/tools/search-tokens/{index.d.ts → search-tokens-input-schema.d.ts} +0 -3
- package/dist/types/tools/search-tokens/search-tokens-tool.d.ts +4 -0
- package/dist/types/tools/suggest-a11y-fixes/list-suggest-a11y-fixes-tool.d.ts +2 -0
- package/dist/types/tools/suggest-a11y-fixes/{index.d.ts → suggest-a11y-fixes-input-schema.d.ts} +0 -8
- package/dist/types/tools/suggest-a11y-fixes/suggest-a11y-fixes-tool.d.ts +8 -0
- package/dist/types-ts4.5/entry-points/analyze-a11y.d.ts +5 -0
- package/dist/types-ts4.5/entry-points/get-a11y-guidelines.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/get-all-components.d.ts +2 -0
- package/dist/types-ts4.5/entry-points/get-all-icons.d.ts +2 -0
- package/dist/types-ts4.5/entry-points/get-all-tokens.d.ts +2 -0
- package/dist/types-ts4.5/entry-points/get-atlaskit-components.d.ts +2 -0
- package/dist/types-ts4.5/entry-points/get-guidelines.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/get-lint-rules.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/i18n-conversion.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/migration-guides.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/plan.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/search-atlaskit-components.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/search-components.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/search-icons.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/search-tokens.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/suggest-a11y-fixes.d.ts +3 -0
- package/dist/types-ts4.5/helpers/agent.d.ts +3 -0
- package/dist/types-ts4.5/helpers/clean-query.d.ts +1 -0
- package/dist/types-ts4.5/helpers/index.d.ts +2 -4
- package/dist/types-ts4.5/helpers/send-operational-event.d.ts +13 -0
- package/dist/types-ts4.5/helpers/zod-to-json-schema.d.ts +3 -0
- package/dist/types-ts4.5/tools/analyze-a11y/analyze-a11y-input-schema.d.ts +17 -0
- package/dist/types-ts4.5/tools/analyze-a11y/analyze-a11y-localhost-input-schema.d.ts +17 -0
- package/dist/types-ts4.5/tools/analyze-a11y/analyze-a11y-tool.d.ts +8 -0
- package/dist/types-ts4.5/tools/analyze-a11y/analyze-localhost-a11y-tool.d.ts +8 -0
- package/dist/types-ts4.5/tools/analyze-a11y/generate-ads-fix-for-violation.d.ts +1 -0
- package/dist/types-ts4.5/tools/analyze-a11y/list-analyze-a11y-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/analyze-a11y/list-analyze-localhost-a11y-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/get-a11y-guidelines/get-a11y-guidelines-input-schema.d.ts +8 -0
- package/dist/types-ts4.5/tools/get-a11y-guidelines/get-a11y-guidelines-tool.d.ts +8 -0
- package/dist/types-ts4.5/tools/get-a11y-guidelines/list-get-a11y-guidelines-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/get-all-components/{index.d.ts → get-all-components-tool.d.ts} +0 -2
- package/dist/types-ts4.5/tools/get-all-components/list-get-all-components-tool.d.ts +2 -0
- package/dist/{types/tools/get-all-icons/index.d.ts → types-ts4.5/tools/get-all-icons/get-all-icons-tool.d.ts} +0 -2
- package/dist/types-ts4.5/tools/get-all-icons/list-get-all-icons-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/get-all-tokens/{index.d.ts → get-all-tokens-tool.d.ts} +0 -2
- package/dist/types-ts4.5/tools/get-all-tokens/list-get-all-tokens-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/get-atlaskit-components/atlaskit-components.codegen.d.ts +10 -0
- package/dist/types-ts4.5/tools/get-atlaskit-components/get-atlaskit-components-tool.d.ts +6 -0
- package/dist/types-ts4.5/tools/get-atlaskit-components/list-get-atlaskit-components-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/get-guidelines/get-guidelines-input-schema.d.ts +5 -0
- package/dist/types-ts4.5/tools/get-guidelines/get-guidelines-tool.d.ts +8 -0
- package/dist/types-ts4.5/tools/get-guidelines/list-get-guidelines-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/get-lint-rules/get-lint-rules-input-schema.d.ts +6 -0
- package/dist/types-ts4.5/tools/get-lint-rules/get-lint-rules-tool.d.ts +4 -0
- package/dist/types-ts4.5/tools/get-lint-rules/{index.d.ts → list-get-lint-rules-tool.d.ts} +0 -8
- package/dist/types-ts4.5/tools/i18n-conversion/{index.d.ts → i18n-conversion-input-schema.d.ts} +0 -8
- package/dist/types-ts4.5/tools/i18n-conversion/i18n-conversion-tool.d.ts +8 -0
- package/dist/types-ts4.5/tools/i18n-conversion/list-i18n-conversion-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/migration-guides/get-available-migration-ids.d.ts +12 -0
- package/dist/types-ts4.5/tools/migration-guides/get-available-migrations-description.d.ts +13 -0
- package/dist/types-ts4.5/tools/migration-guides/list-migration-guides-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/migration-guides/{index.d.ts → migration-guides-input-schema.d.ts} +0 -8
- package/dist/types-ts4.5/tools/migration-guides/migration-guides-tool.d.ts +8 -0
- package/dist/types-ts4.5/tools/migration-guides/migrations/onboarding-jira-spotlight.d.ts +2 -0
- package/dist/types-ts4.5/tools/migration-guides/migrations/onboarding-multi-step.d.ts +2 -0
- package/dist/types-ts4.5/tools/migration-guides/migrations/onboarding-single-step.d.ts +2 -0
- package/dist/types-ts4.5/tools/migration-guides/migrations/onboarding-with-motion.d.ts +2 -0
- package/dist/types-ts4.5/tools/plan/list-plan-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/plan/{index.d.ts → plan-input-schema.d.ts} +3 -15
- package/dist/types-ts4.5/tools/plan/plan-tool.d.ts +15 -0
- package/dist/types-ts4.5/tools/search-atlaskit-components/list-search-atlaskit-components-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/search-atlaskit-components/search-atlaskit-components-input-schema.d.ts +11 -0
- package/dist/types-ts4.5/tools/search-atlaskit-components/search-atlaskit-components-tool.d.ts +4 -0
- package/dist/types-ts4.5/tools/search-components/list-search-components-tool.d.ts +2 -0
- package/dist/{types/tools/search-components/index.d.ts → types-ts4.5/tools/search-components/search-components-input-schema.d.ts} +0 -3
- package/dist/types-ts4.5/tools/search-components/search-components-tool.d.ts +4 -0
- package/dist/types-ts4.5/tools/search-icons/list-search-icons-tool.d.ts +2 -0
- package/dist/{types/tools/search-icons/index.d.ts → types-ts4.5/tools/search-icons/search-icons-input-schema.d.ts} +0 -3
- package/dist/types-ts4.5/tools/search-icons/search-icons-tool.d.ts +4 -0
- package/dist/types-ts4.5/tools/search-tokens/list-search-tokens-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/search-tokens/{index.d.ts → search-tokens-input-schema.d.ts} +0 -3
- package/dist/types-ts4.5/tools/search-tokens/search-tokens-tool.d.ts +4 -0
- package/dist/types-ts4.5/tools/suggest-a11y-fixes/list-suggest-a11y-fixes-tool.d.ts +2 -0
- package/dist/types-ts4.5/tools/suggest-a11y-fixes/{index.d.ts → suggest-a11y-fixes-input-schema.d.ts} +0 -8
- package/dist/types-ts4.5/tools/suggest-a11y-fixes/suggest-a11y-fixes-tool.d.ts +8 -0
- package/index.js +0 -2
- package/package.json +4 -9
- package/tools/analyze-a11y/package.json +5 -5
- package/tools/get-a11y-guidelines/package.json +5 -5
- package/tools/get-all-components/package.json +5 -5
- package/tools/get-all-icons/package.json +5 -5
- package/tools/get-all-tokens/package.json +5 -5
- package/tools/get-guidelines/package.json +5 -5
- package/tools/get-lint-rules/package.json +5 -5
- package/tools/i18n-conversion/package.json +5 -5
- package/tools/migration-guides/package.json +5 -5
- package/tools/plan/package.json +5 -5
- package/tools/search-components/package.json +5 -5
- package/tools/search-icons/package.json +5 -5
- package/tools/search-tokens/package.json +5 -5
- package/tools/suggest-a11y-fixes/package.json +5 -5
- package/dist/cjs/tools/analyze-a11y/index.js +0 -483
- package/dist/cjs/tools/migration-guides/migrations/onboarding-to-spotlight.js +0 -77
- package/dist/es2019/tools/analyze-a11y/index.js +0 -432
- package/dist/es2019/tools/get-a11y-guidelines/index.js +0 -58
- package/dist/es2019/tools/migration-guides/index.js +0 -69
- package/dist/es2019/tools/migration-guides/migrations/onboarding-to-spotlight.js +0 -646
- package/dist/es2019/tools/plan/index.js +0 -147
- package/dist/esm/tools/analyze-a11y/index.js +0 -478
- package/dist/esm/tools/migration-guides/migrations/onboarding-to-spotlight.js +0 -71
- package/dist/types/tools/analyze-a11y/index.d.ts +0 -48
- package/dist/types/tools/get-a11y-guidelines/index.d.ts +0 -16
- package/dist/types/tools/get-guidelines/index.d.ts +0 -13
- package/dist/types/tools/i18n-conversion/index.d.ts +0 -16
- package/dist/types/tools/migration-guides/index.d.ts +0 -19
- package/dist/types/tools/migration-guides/migrations/onboarding-to-spotlight.d.ts +0 -5
- package/dist/types-ts4.5/tools/analyze-a11y/index.d.ts +0 -48
- package/dist/types-ts4.5/tools/get-a11y-guidelines/index.d.ts +0 -16
- package/dist/types-ts4.5/tools/get-guidelines/index.d.ts +0 -13
- package/dist/types-ts4.5/tools/migration-guides/migrations/onboarding-to-spotlight.d.ts +0 -5
|
@@ -0,0 +1,1944 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.atlaskitComponents = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
+
*
|
|
10
|
+
* Structured content components from design-system *.docs.tsx files
|
|
11
|
+
*
|
|
12
|
+
* @codegen <<SignedSource::42424c7764db588f50ac98406a12d3d8>>
|
|
13
|
+
* @codegenCommand yarn workspace @af/ads-ai-tooling codegen:structured-docs-atlaskit-components
|
|
14
|
+
*/
|
|
15
|
+
/* eslint-disable @repo/internal/react/boolean-prop-naming-convention -- not our types */
|
|
16
|
+
|
|
17
|
+
var atlaskitComponents = exports.atlaskitComponents = [{
|
|
18
|
+
name: 'Conversation',
|
|
19
|
+
package: '@atlaskit/conversation',
|
|
20
|
+
description: 'DEPRECATED Render conversation threads',
|
|
21
|
+
status: 'general-availability',
|
|
22
|
+
usageGuidelines: [],
|
|
23
|
+
contentGuidelines: [],
|
|
24
|
+
accessibilityGuidelines: [],
|
|
25
|
+
keywords: ['editor', 'conversation', 'atlaskit'],
|
|
26
|
+
category: 'editor',
|
|
27
|
+
examples: ["import {\n\tMockProvider as ConversationResource,\n\tgetDataProviderFactory,\n} from '../example-helpers/MockProvider';\nimport { MOCK_USERS } from '../example-helpers/MockData';\nimport { Conversation } from '../src';\nconst provider = new ConversationResource({\n\turl: 'http://mockservice/',\n\tuser: MOCK_USERS[3],\n});\nexport default function Example(): React.JSX.Element {\n\treturn (\n\t\t<Conversation\n\t\t\tobjectId=\"ari:cloud:platform::conversation/demo\"\n\t\t\tprovider={provider}\n\t\t\tdataProviders={getDataProviderFactory()}\n\t\t/>\n\t);\n}", "import { MOCK_USERS } from '../example-helpers/MockData';\nimport {\n\tgetDataProviderFactory,\n\tMockProvider as ConversationResource,\n} from '../example-helpers/MockProvider';\nimport { Conversation } from '../src';\nconst provider = new ConversationResource({\n\turl: 'http://mockservice/',\n\tuser: MOCK_USERS[3],\n});\n// Ignored via go/ees005\nexport default class ExistingConversation extends React.Component<{}, { conversationId?: string }> {\n\tstate = {\n\t\tconversationId: undefined,\n\t};\n\tasync componentDidMount(): Promise<void> {\n\t\tconst [conversation] = await provider.getConversations();\n\t\tthis.setState({\n\t\t\tconversationId: conversation.conversationId,\n\t\t});\n\t}\n\trender(): React.JSX.Element | null {\n\t\tconst { conversationId } = this.state;\n\t\tif (!conversationId) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<Conversation\n\t\t\t\tid={conversationId}\n\t\t\t\tobjectId=\"ari:cloud:platform::conversation/demo\"\n\t\t\t\tprovider={provider}\n\t\t\t\tdataProviders={getDataProviderFactory()}\n\t\t\t/>\n\t\t);\n\t}\n}", "import type { EditorProps } from '@atlaskit/editor-core';\nimport type { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { useUniversalPreset } from '@atlaskit/editor-core/preset-universal';\nimport { MOCK_USERS } from '../example-helpers/MockData';\nimport {\n\tgetDataProviderFactory,\n\tMockProvider as ConversationResource,\n} from '../example-helpers/MockProvider';\nimport { Conversation } from '../src';\nconst provider = new ConversationResource({\n\turl: 'http://mockservice/',\n\tuser: MOCK_USERS[3],\n});\n// Ignored via go/ees005\nexport default class ExistingConversation extends React.Component<{}, { conversationId?: string }> {\n\tstate = {\n\t\tconversationId: undefined,\n\t};\n\tasync componentDidMount(): Promise<void> {\n\t\tconst [conversation] = await provider.getConversations();\n\t\tthis.setState({\n\t\t\tconversationId: conversation.conversationId,\n\t\t});\n\t}\n\trender(): React.JSX.Element | null {\n\t\tconst { conversationId } = this.state;\n\t\tif (!conversationId) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<Conversation\n\t\t\t\tid={conversationId}\n\t\t\t\tobjectId=\"ari:cloud:platform::conversation/demo\"\n\t\t\t\tprovider={provider}\n\t\t\t\tdataProviders={getDataProviderFactory()}\n\t\t\t\trenderEditor={(Editor, props) => (\n\t\t\t\t\t<ComposableEditorWrapper {...props} saveOnEnter={true} Editor={Editor} />\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t}\n}\nconst ComposableEditorWrapper = ({\n\tEditor,\n\t...props\n}: EditorProps & { Editor: typeof ComposableEditor }) => {\n\tconst universalPreset = useUniversalPreset({ props });\n\treturn <Editor preset={universalPreset} {...props} />;\n};"],
|
|
28
|
+
props: [{
|
|
29
|
+
name: 'allowFeedbackAndHelpButtons',
|
|
30
|
+
type: 'boolean'
|
|
31
|
+
}, {
|
|
32
|
+
name: 'containerId',
|
|
33
|
+
type: 'string'
|
|
34
|
+
}, {
|
|
35
|
+
name: 'dataProviders',
|
|
36
|
+
type: 'ProviderFactory'
|
|
37
|
+
}, {
|
|
38
|
+
name: 'disableScrollTo',
|
|
39
|
+
type: 'boolean'
|
|
40
|
+
}, {
|
|
41
|
+
name: 'id',
|
|
42
|
+
type: 'string'
|
|
43
|
+
}, {
|
|
44
|
+
name: 'isExpanded',
|
|
45
|
+
type: 'boolean'
|
|
46
|
+
}, {
|
|
47
|
+
name: 'maxCommentNesting',
|
|
48
|
+
type: 'number'
|
|
49
|
+
}, {
|
|
50
|
+
name: 'meta',
|
|
51
|
+
type: '{ [key: string]: any; }'
|
|
52
|
+
}, {
|
|
53
|
+
name: 'objectId',
|
|
54
|
+
type: 'string',
|
|
55
|
+
isRequired: true
|
|
56
|
+
}, {
|
|
57
|
+
name: 'onCancel',
|
|
58
|
+
type: '() => void'
|
|
59
|
+
}, {
|
|
60
|
+
name: 'onEditorChange',
|
|
61
|
+
type: '() => void'
|
|
62
|
+
}, {
|
|
63
|
+
name: 'onEditorClose',
|
|
64
|
+
type: '() => void'
|
|
65
|
+
}, {
|
|
66
|
+
name: 'onEditorOpen',
|
|
67
|
+
type: '() => void'
|
|
68
|
+
}, {
|
|
69
|
+
name: 'placeholder',
|
|
70
|
+
type: 'string'
|
|
71
|
+
}, {
|
|
72
|
+
name: 'portal',
|
|
73
|
+
type: 'HTMLElement'
|
|
74
|
+
}, {
|
|
75
|
+
name: 'provider',
|
|
76
|
+
type: 'ResourceProvider',
|
|
77
|
+
isRequired: true
|
|
78
|
+
}, {
|
|
79
|
+
name: 'renderAdditionalCommentActions',
|
|
80
|
+
type: '(CommentAction: ForwardRefExoticComponent<Omit<CommentActionItemProps, "ref"> & RefAttributes<HTMLSpanElement>>, comment: Comment) => global.JSX.Element[]'
|
|
81
|
+
}, {
|
|
82
|
+
name: 'renderAfterComment',
|
|
83
|
+
type: '(comment: Comment) => global.JSX.Element'
|
|
84
|
+
}, {
|
|
85
|
+
name: 'renderEditor',
|
|
86
|
+
type: '(Editor: (props: EditorNextProps) => JSX.Element, props: EditorProps, comment?: Comment) => global.JSX.Element'
|
|
87
|
+
}, {
|
|
88
|
+
name: 'showBeforeUnloadWarning',
|
|
89
|
+
type: 'boolean'
|
|
90
|
+
}]
|
|
91
|
+
}, {
|
|
92
|
+
name: 'Editor Core',
|
|
93
|
+
package: '@atlaskit/editor-core',
|
|
94
|
+
description: 'A package contains Atlassian editor core functionality',
|
|
95
|
+
status: 'general-availability',
|
|
96
|
+
usageGuidelines: ['Use the comment appearance when the editor is not the primary focus (e.g. comments on a page); use full-page or full-width when the editor is the main focus; use chromeless when you need complete control over the editor UI; use mobile for mobile web.', 'Configure features via presets (default, universal, or custom). Always include basePlugin; use usePreset or similar memoization so the preset is stable across re-renders.', 'Use ComposableEditor with a preset; provide providers (e.g. mentionProvider) when the editor needs context from your app.'],
|
|
97
|
+
contentGuidelines: [],
|
|
98
|
+
accessibilityGuidelines: [],
|
|
99
|
+
keywords: ['editor', 'editor-core', 'atlaskit'],
|
|
100
|
+
category: 'editor',
|
|
101
|
+
examples: ["import { code } from '@atlaskit/docs';\nimport { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { listPlugin } from '@atlaskit/editor-plugins/list';\nfunction Editor() {\n\tconst { preset } = usePreset((builder) =>\n\t\tbuilder.add(basePlugin).add([analyticsPlugin, {}]).add(blockTypePlugin).add(listPlugin),\n\t);\n\treturn <ComposableEditor preset={preset} />;\n}\nexport default function Example(): React.JSX.Element {\n\treturn (\n\t\t<div>\n\t\t\t<p>\n\t\t\t\t{\n\t\t\t\t\t'A basic example of the Composable Editor which has basic text formatting, analytics, headings, and lists.'\n\t\t\t\t}\n\t\t\t</p>\n\t\t\t{code`import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { listPlugin } from '@atlaskit/editor-plugins/list';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nfunction Editor() {\n const { preset } = usePreset(\n (builder) =>\n builder\n .add(basePlugin)\n .add(analyticsPlugin)\n .add(blockTypePlugin)\n .add(listPlugin),\n [],\n );\n return <ComposableEditor preset={preset} />;\n}`}\n\t\t\t<br />\n\t\t\t<Editor />\n\t\t</div>\n\t);\n}", "import { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { contentInsertionPlugin } from '@atlaskit/editor-plugins/content-insertion';\nimport { copyButtonPlugin } from '@atlaskit/editor-plugins/copy-button';\nimport { decorationsPlugin } from '@atlaskit/editor-plugins/decorations';\nimport { editorDisabledPlugin } from '@atlaskit/editor-plugins/editor-disabled';\nimport { floatingToolbarPlugin } from '@atlaskit/editor-plugins/floating-toolbar';\nimport { guidelinePlugin } from '@atlaskit/editor-plugins/guideline';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { selectionPlugin } from '@atlaskit/editor-plugins/selection';\nimport { tablesPlugin } from '@atlaskit/editor-plugins/table';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugins/type-ahead';\nimport { widthPlugin } from '@atlaskit/editor-plugins/width';\nimport { CommentEditor } from '../src/editor-appearances/CommentEditor';\nexport default function Editor(): React.JSX.Element {\n\tconst { preset } = usePreset((builder) =>\n\t\tbuilder\n\t\t\t.add(basePlugin)\n\t\t\t.add(editorDisabledPlugin)\n\t\t\t.add([analyticsPlugin, {}])\n\t\t\t.add(blockTypePlugin)\n\t\t\t.add(copyButtonPlugin)\n\t\t\t.add(decorationsPlugin)\n\t\t\t.add(floatingToolbarPlugin)\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add(quickInsertPlugin)\n\t\t\t.add(selectionPlugin)\n\t\t\t.add(widthPlugin)\n\t\t\t.add(contentInsertionPlugin)\n\t\t\t.add(guidelinePlugin)\n\t\t\t.add(tablesPlugin),\n\t);\n\treturn <CommentEditor preset={preset} />;\n}", "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { contentInsertionPlugin } from '@atlaskit/editor-plugins/content-insertion';\nimport { copyButtonPlugin } from '@atlaskit/editor-plugins/copy-button';\nimport { decorationsPlugin } from '@atlaskit/editor-plugins/decorations';\nimport { editorDisabledPlugin } from '@atlaskit/editor-plugins/editor-disabled';\nimport { floatingToolbarPlugin } from '@atlaskit/editor-plugins/floating-toolbar';\nimport { guidelinePlugin } from '@atlaskit/editor-plugins/guideline';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { selectionPlugin } from '@atlaskit/editor-plugins/selection';\nimport { tablesPlugin } from '@atlaskit/editor-plugins/table';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugins/type-ahead';\nimport { widthPlugin } from '@atlaskit/editor-plugins/width';\nimport { FullPageEditor } from '../src/editor-appearances/FullPageEditor';\nimport { FullWidthEditor } from '../src/editor-appearances/FullWidthEditor';\nexport default function Editor(): React.JSX.Element {\n\tconst { preset } = usePreset((builder) =>\n\t\tbuilder\n\t\t\t.add(basePlugin)\n\t\t\t.add(editorDisabledPlugin)\n\t\t\t.add([analyticsPlugin, {}])\n\t\t\t.add(blockTypePlugin)\n\t\t\t.add(copyButtonPlugin)\n\t\t\t.add(decorationsPlugin)\n\t\t\t.add(floatingToolbarPlugin)\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add(quickInsertPlugin)\n\t\t\t.add(selectionPlugin)\n\t\t\t.add(widthPlugin)\n\t\t\t.add(contentInsertionPlugin)\n\t\t\t.add(guidelinePlugin)\n\t\t\t.add(tablesPlugin),\n\t);\n\tconst [fullWidth, setFullWidth] = useState(false);\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tsetFullWidth((current) => !current);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{fullWidth ? 'Use full-page' : 'Use full-width'}\n\t\t\t</Button>\n\t\t\t{fullWidth ? (\n\t\t\t\t<FullWidthEditor preset={preset} />\n\t\t\t) : (\n\t\t\t\t<FullPageEditor appearance=\"full-page\" preset={preset} />\n\t\t\t)}\n\t\t</>\n\t);\n}"],
|
|
102
|
+
props: [{
|
|
103
|
+
name: '__livePage',
|
|
104
|
+
type: 'boolean',
|
|
105
|
+
description: 'This is required for accessing whether a page is a live page or not when rendering the appearance component.\n\nAll other consumers should use the editorViewModePlugin to access live page and content mode status.',
|
|
106
|
+
defaultValue: 'false'
|
|
107
|
+
}, {
|
|
108
|
+
name: 'activityProvider',
|
|
109
|
+
type: 'Promise<ActivityProvider>'
|
|
110
|
+
}, {
|
|
111
|
+
name: 'allowAnalyticsGASV3',
|
|
112
|
+
type: 'boolean'
|
|
113
|
+
}, {
|
|
114
|
+
name: 'allowBlockType',
|
|
115
|
+
type: '{ exclude?: AllowedBlockTypes[]; }'
|
|
116
|
+
}, {
|
|
117
|
+
name: 'allowBorderMark',
|
|
118
|
+
type: 'boolean',
|
|
119
|
+
description: 'Enable support for the "border" mark.\nRefer to ADF Change proposal #65 for more details.'
|
|
120
|
+
}, {
|
|
121
|
+
name: 'allowBreakout',
|
|
122
|
+
type: 'boolean'
|
|
123
|
+
}, {
|
|
124
|
+
name: 'allowConfluenceInlineComment',
|
|
125
|
+
type: 'boolean'
|
|
126
|
+
}, {
|
|
127
|
+
name: 'allowDate',
|
|
128
|
+
type: 'boolean | DatePluginOptions'
|
|
129
|
+
}, {
|
|
130
|
+
name: 'allowExpand',
|
|
131
|
+
type: 'boolean | { allowInsertion?: boolean; allowInteractiveExpand?: boolean; }'
|
|
132
|
+
}, {
|
|
133
|
+
name: 'allowExtension',
|
|
134
|
+
type: 'boolean | ExtensionConfig'
|
|
135
|
+
}, {
|
|
136
|
+
name: 'allowFindReplace',
|
|
137
|
+
type: 'boolean | FindReplaceOptions'
|
|
138
|
+
}, {
|
|
139
|
+
name: 'allowFragmentMark',
|
|
140
|
+
type: 'boolean',
|
|
141
|
+
description: 'Enable support for the "fragment" mark.\nRefer to ADF Change proposal #60 for more details.'
|
|
142
|
+
}, {
|
|
143
|
+
name: 'allowHelpDialog',
|
|
144
|
+
type: 'boolean'
|
|
145
|
+
}, {
|
|
146
|
+
name: 'allowIndentation',
|
|
147
|
+
type: 'boolean'
|
|
148
|
+
}, {
|
|
149
|
+
name: 'allowLayouts',
|
|
150
|
+
type: 'boolean | LayoutPluginOptions'
|
|
151
|
+
}, {
|
|
152
|
+
name: 'allowNestedTasks',
|
|
153
|
+
type: 'boolean'
|
|
154
|
+
}, {
|
|
155
|
+
name: 'allowPanel',
|
|
156
|
+
type: 'boolean | PanelPluginConfig'
|
|
157
|
+
}, {
|
|
158
|
+
name: 'allowRule',
|
|
159
|
+
type: 'boolean'
|
|
160
|
+
}, {
|
|
161
|
+
name: 'allowStatus',
|
|
162
|
+
type: 'boolean | { menuDisabled: boolean; }'
|
|
163
|
+
}, {
|
|
164
|
+
name: 'allowTables',
|
|
165
|
+
type: 'boolean | PluginConfig'
|
|
166
|
+
}, {
|
|
167
|
+
name: 'allowTasksAndDecisions',
|
|
168
|
+
type: 'boolean'
|
|
169
|
+
}, {
|
|
170
|
+
name: 'allowTemplatePlaceholders',
|
|
171
|
+
type: 'boolean | PlaceholderTextPluginOptions'
|
|
172
|
+
}, {
|
|
173
|
+
name: 'allowTextAlignment',
|
|
174
|
+
type: 'boolean'
|
|
175
|
+
}, {
|
|
176
|
+
name: 'allowTextColor',
|
|
177
|
+
type: 'boolean | TextColorPluginConfig'
|
|
178
|
+
}, {
|
|
179
|
+
name: 'allowUndoRedoButtons',
|
|
180
|
+
type: 'boolean'
|
|
181
|
+
}, {
|
|
182
|
+
name: 'annotationProviders',
|
|
183
|
+
type: 'AnnotationProviders'
|
|
184
|
+
}, {
|
|
185
|
+
name: 'appearance',
|
|
186
|
+
type: '"comment" | "full-page" | "full-width" | "max" | "chromeless"'
|
|
187
|
+
}, {
|
|
188
|
+
name: 'assistiveDescribedBy',
|
|
189
|
+
type: 'string'
|
|
190
|
+
}, {
|
|
191
|
+
name: 'assistiveLabel',
|
|
192
|
+
type: 'string'
|
|
193
|
+
}, {
|
|
194
|
+
name: 'autoformattingProvider',
|
|
195
|
+
type: 'Promise<AutoformattingProvider>'
|
|
196
|
+
}, {
|
|
197
|
+
name: 'autoScrollIntoView',
|
|
198
|
+
type: 'boolean',
|
|
199
|
+
description: 'Set this to false to opt out of the default behaviour of auto scrolling into view\nwhenever the document is changed'
|
|
200
|
+
}, {
|
|
201
|
+
name: 'codeBlock',
|
|
202
|
+
type: 'CodeBlockPluginOptions'
|
|
203
|
+
}, {
|
|
204
|
+
name: 'collabEdit',
|
|
205
|
+
type: '{ provider?: Promise<CollabEditProvider<CollabEvents>>; useNativePlugin?: boolean; userId?: string; } & CollabInviteToEditProps & CollabAnalyticsProps'
|
|
206
|
+
}, {
|
|
207
|
+
name: 'collabEditProvider',
|
|
208
|
+
type: 'Promise<CollabEditProvider<CollabEvents>>'
|
|
209
|
+
}, {
|
|
210
|
+
name: 'contentComponents',
|
|
211
|
+
type: 'BeforeAndAfterContentComponents | ReactComponents'
|
|
212
|
+
}, {
|
|
213
|
+
name: 'contentTransformerProvider',
|
|
214
|
+
type: '(schema: Schema<any, any>) => Transformer<string>'
|
|
215
|
+
}, {
|
|
216
|
+
name: 'contextIdentifierProvider',
|
|
217
|
+
type: 'Promise<ContextIdentifierProvider>'
|
|
218
|
+
}, {
|
|
219
|
+
name: 'contextPanel',
|
|
220
|
+
type: 'ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]'
|
|
221
|
+
}, {
|
|
222
|
+
name: 'defaultValue',
|
|
223
|
+
type: 'string | Object | Node'
|
|
224
|
+
}, {
|
|
225
|
+
name: 'disabled',
|
|
226
|
+
type: 'boolean'
|
|
227
|
+
}, {
|
|
228
|
+
name: 'editorActions',
|
|
229
|
+
type: 'EditorActions<any>'
|
|
230
|
+
}, {
|
|
231
|
+
name: 'elementBrowser',
|
|
232
|
+
type: '{ emptyStateHandler?: EmptyStateHandler; helpUrl?: string; replacePlusMenu?: boolean; showModal?: boolean; }'
|
|
233
|
+
}, {
|
|
234
|
+
name: 'emojiProvider',
|
|
235
|
+
type: 'Promise<EmojiProvider>'
|
|
236
|
+
}, {
|
|
237
|
+
name: 'errorReporterHandler',
|
|
238
|
+
type: 'ErrorReportingHandler'
|
|
239
|
+
}, {
|
|
240
|
+
name: 'extensionHandlers',
|
|
241
|
+
type: 'ExtensionHandlers<any>'
|
|
242
|
+
}, {
|
|
243
|
+
name: 'extensionProviders',
|
|
244
|
+
type: 'ExtensionProviders | ExtensionProvidersWithEditorAction'
|
|
245
|
+
}, {
|
|
246
|
+
name: 'featureFlags',
|
|
247
|
+
type: '{ [featureFlag: string]: string | boolean; }',
|
|
248
|
+
description: "@description\nShort lived feature flags for experiments and gradual rollouts\nFlags are expected to follow these rules or they are filtered out\n\n1. cased in kebab-case (match [a-z-])\n2. have boolean values\n\n@example\n```tsx\n(<Editor featureFlags={{ 'my-feature': true }} />);\ngetFeatureFlags()?.myFeature === true;\n```\n\n@example\n```tsx\n(<Editor featureFlags={{ 'my-feature': 'thing' }} />);\ngetFeatureFlags()?.myFeature === undefined;\n```\n\n@example\n```tsx\n(<Editor featureFlags={{ 'product.my-feature': false }} />);\ngetFeatureFlags()?.myFeature === undefined;\ngetFeatureFlags()?.productMyFeature === undefined;\n```",
|
|
249
|
+
defaultValue: 'undefined'
|
|
250
|
+
}, {
|
|
251
|
+
name: 'feedbackInfo',
|
|
252
|
+
type: '{ contentId?: string; coreVersion?: string; labels?: string[]; packageName?: string; packageVersion?: string; product?: string; sessionId?: string; tabId?: string; }'
|
|
253
|
+
}, {
|
|
254
|
+
name: 'initialPluginConfiguration',
|
|
255
|
+
type: '{ blockControlsPlugin?: { enabled?: boolean; quickInsertButtonEnabled?: boolean; rightSideControlsEnabled?: boolean; }; blockMenuPlugin?: { blockLinkHashPrefix?: string; enabled?: boolean; getLinkPath?: () => string; useStandardNodeWidth?: boolean; }; ... 7 more ...; trackChangesPlugin?: { ...; }; }'
|
|
256
|
+
}, {
|
|
257
|
+
name: 'insertMenuItems',
|
|
258
|
+
type: 'MenuItem[]'
|
|
259
|
+
}, {
|
|
260
|
+
name: 'legacyImageUploadProvider',
|
|
261
|
+
type: 'Promise<ImageUploadProvider>'
|
|
262
|
+
}, {
|
|
263
|
+
name: 'linking',
|
|
264
|
+
type: 'LinkingOptions',
|
|
265
|
+
description: 'Configure and extend editor linking behaviour'
|
|
266
|
+
}, {
|
|
267
|
+
name: 'macroProvider',
|
|
268
|
+
type: 'Promise<MacroProvider>'
|
|
269
|
+
}, {
|
|
270
|
+
name: 'maxContentSize',
|
|
271
|
+
type: 'number'
|
|
272
|
+
}, {
|
|
273
|
+
name: 'maxHeight',
|
|
274
|
+
type: 'number'
|
|
275
|
+
}, {
|
|
276
|
+
name: 'media',
|
|
277
|
+
type: 'MediaPluginOptions'
|
|
278
|
+
}, {
|
|
279
|
+
name: 'mention',
|
|
280
|
+
type: 'MentionPluginConfig'
|
|
281
|
+
}, {
|
|
282
|
+
name: 'mentionProvider',
|
|
283
|
+
type: 'Promise<MentionProvider>'
|
|
284
|
+
}, {
|
|
285
|
+
name: 'minHeight',
|
|
286
|
+
type: 'number'
|
|
287
|
+
}, {
|
|
288
|
+
name: 'onCancel',
|
|
289
|
+
type: '(editorView: EditorView) => void'
|
|
290
|
+
}, {
|
|
291
|
+
name: 'onChange',
|
|
292
|
+
type: '(editorView: EditorView, meta: { isDirtyChange: boolean; source: "local" | "remote"; }) => void'
|
|
293
|
+
}, {
|
|
294
|
+
name: 'onDestroy',
|
|
295
|
+
type: '() => void'
|
|
296
|
+
}, {
|
|
297
|
+
name: 'onEditorReady',
|
|
298
|
+
type: '(editorActions: EditorActions<any>) => void'
|
|
299
|
+
}, {
|
|
300
|
+
name: 'onSave',
|
|
301
|
+
type: '(editorView: EditorView) => void'
|
|
302
|
+
}, {
|
|
303
|
+
name: 'onSSRMeasure',
|
|
304
|
+
type: '(measure: { endTimestamp: number; segmentName: string; startTimestamp: number; }) => void',
|
|
305
|
+
description: 'Callback for measuring Server-Side Rendering (SSR) performance metrics.\nInvoked during SSR to track timing information for different segments of the rendering process.\n\n@param measure - Performance measurement data\n@param measure.startTimestamp - Absolute timestamp when the segment started (from `performance.now()`)\n@param measure.endTimestamp - Absolute timestamp when the segment completed (from `performance.now()`)\n@param measure.segmentName - Name identifier of the SSR segment being measured\n\n@remarks\nBoth timestamps are absolute values from `performance.now()`, not relative to measurement start.\nCalculate duration as: `measure.endTimestamp - measure.startTimestamp`\n\n@example\n```typescript\nonSSRMeasure={(measure) => {\n const duration = measure.endTimestamp - measure.startTimestamp;\n console.log(`${measure.segmentName}: ${duration}ms`);\n}}\n```'
|
|
306
|
+
}, {
|
|
307
|
+
name: 'pasteWarningOptions',
|
|
308
|
+
type: '{ cannotPasteSyncedBlock?: { description: MessageDescriptor; title: MessageDescriptor; urlHref: string; urlText: MessageDescriptor; }; }'
|
|
309
|
+
}, {
|
|
310
|
+
name: 'persistScrollGutter',
|
|
311
|
+
type: 'boolean'
|
|
312
|
+
}, {
|
|
313
|
+
name: 'placeholder',
|
|
314
|
+
type: 'string'
|
|
315
|
+
}, {
|
|
316
|
+
name: 'placeholderBracketHint',
|
|
317
|
+
type: 'string'
|
|
318
|
+
}, {
|
|
319
|
+
name: 'popupsBoundariesElement',
|
|
320
|
+
type: 'HTMLElement'
|
|
321
|
+
}, {
|
|
322
|
+
name: 'popupsMountPoint',
|
|
323
|
+
type: 'HTMLElement'
|
|
324
|
+
}, {
|
|
325
|
+
name: 'popupsScrollableElement',
|
|
326
|
+
type: 'HTMLElement'
|
|
327
|
+
}, {
|
|
328
|
+
name: 'presenceProvider',
|
|
329
|
+
type: 'Promise<any>'
|
|
330
|
+
}, {
|
|
331
|
+
name: 'primaryToolbarComponents',
|
|
332
|
+
type: 'ReactComponents | BeforeAndAfterToolbarComponents'
|
|
333
|
+
}, {
|
|
334
|
+
name: 'primaryToolbarIconBefore',
|
|
335
|
+
type: 'ReactElement<any, string | JSXElementConstructor<any>>'
|
|
336
|
+
}, {
|
|
337
|
+
name: 'quickInsert',
|
|
338
|
+
type: 'boolean | { disableDefaultItems?: boolean; itemFilter?: (item: QuickInsertItem) => boolean; onInsert?: (item: QuickInsertItem) => void; prioritySortingFn?: (items: QuickInsertItem[]) => Fuse.FuseSortFunction; provider?: Promise<...>; }'
|
|
339
|
+
}, {
|
|
340
|
+
name: 'sanitizePrivateContent',
|
|
341
|
+
type: 'boolean'
|
|
342
|
+
}, {
|
|
343
|
+
name: 'saveOnEnter',
|
|
344
|
+
type: 'boolean'
|
|
345
|
+
}, {
|
|
346
|
+
name: 'searchProvider',
|
|
347
|
+
type: 'Promise<SearchProvider>'
|
|
348
|
+
}, {
|
|
349
|
+
name: 'secondaryToolbarComponents',
|
|
350
|
+
type: 'ReactElement<any, string | JSXElementConstructor<any>> | ReactElement<any, string | JSXElementConstructor<any>>[]'
|
|
351
|
+
}, {
|
|
352
|
+
name: 'shouldFocus',
|
|
353
|
+
type: 'boolean'
|
|
354
|
+
}, {
|
|
355
|
+
name: 'showIndentationButtons',
|
|
356
|
+
type: 'boolean'
|
|
357
|
+
}, {
|
|
358
|
+
name: 'skipValidation',
|
|
359
|
+
type: 'boolean'
|
|
360
|
+
}, {
|
|
361
|
+
name: 'syncBlock',
|
|
362
|
+
type: 'SyncedBlockPluginOptions'
|
|
363
|
+
}, {
|
|
364
|
+
name: 'syncedBlockProvider',
|
|
365
|
+
type: 'SyncedBlockProvider'
|
|
366
|
+
}, {
|
|
367
|
+
name: 'taskDecisionProvider',
|
|
368
|
+
type: 'Promise<TaskDecisionProvider>'
|
|
369
|
+
}, {
|
|
370
|
+
name: 'textFormatting',
|
|
371
|
+
type: 'TextFormattingOptions'
|
|
372
|
+
}, {
|
|
373
|
+
name: 'uploadErrorHandler',
|
|
374
|
+
type: '(state: MediaState) => void'
|
|
375
|
+
}, {
|
|
376
|
+
name: 'useStickyToolbar',
|
|
377
|
+
type: 'boolean | RefObject<HTMLElement> | { offsetTop: number; }',
|
|
378
|
+
description: "@description\nEnables the sticky toolbar in the comment/standard editor.\nIf a boolean is specified and it's `true`, the sticky toolbar will be enabled, sticking to the top of the scroll parent.\nInstead a reference can be specified to an existing sticky toolbar on the page that the editor toolbar should stay below (experimental).\nif {offsetTop: number} is passed in, the toolbar is sticky and the toolbar's 'top' will be set to the offsetTop\nso the toolbar will sticks to `{offsetTop}` below the scroll parent.",
|
|
379
|
+
defaultValue: 'undefined'
|
|
380
|
+
}, {
|
|
381
|
+
name: 'waitForMediaUpload',
|
|
382
|
+
type: 'boolean'
|
|
383
|
+
}]
|
|
384
|
+
}, {
|
|
385
|
+
name: 'Editor Plugin Block Controls',
|
|
386
|
+
package: '@atlaskit/editor-plugin-block-controls',
|
|
387
|
+
description: 'Block controls plugin for @atlaskit/editor-core',
|
|
388
|
+
status: 'general-availability',
|
|
389
|
+
usageGuidelines: [],
|
|
390
|
+
contentGuidelines: [],
|
|
391
|
+
accessibilityGuidelines: [],
|
|
392
|
+
keywords: ['editor', 'editor-plugin-block-controls', 'atlaskit'],
|
|
393
|
+
category: 'editor',
|
|
394
|
+
examples: ["import applyDevTools from 'prosemirror-dev-tools';\nimport { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { annotationPlugin } from '@atlaskit/editor-plugins/annotation';\nimport type { AnnotationProviders } from '@atlaskit/editor-plugins/annotation';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockControlsPlugin } from '@atlaskit/editor-plugins/block-controls';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { breakoutPlugin } from '@atlaskit/editor-plugins/breakout';\nimport { codeBlockPlugin } from '@atlaskit/editor-plugins/code-block';\nimport { compositionPlugin } from '@atlaskit/editor-plugins/composition';\nimport { contentInsertionPlugin } from '@atlaskit/editor-plugins/content-insertion';\nimport { copyButtonPlugin } from '@atlaskit/editor-plugins/copy-button';\nimport { decorationsPlugin } from '@atlaskit/editor-plugins/decorations';\nimport { editorDisabledPlugin } from '@atlaskit/editor-plugins/editor-disabled';\nimport { emojiPlugin } from '@atlaskit/editor-plugins/emoji';\nimport { expandPlugin } from '@atlaskit/editor-plugins/expand';\nimport { extensionPlugin } from '@atlaskit/editor-plugins/extension';\nimport { floatingToolbarPlugin } from '@atlaskit/editor-plugins/floating-toolbar';\nimport { focusPlugin } from '@atlaskit/editor-plugins/focus';\nimport { gridPlugin } from '@atlaskit/editor-plugins/grid';\nimport { guidelinePlugin } from '@atlaskit/editor-plugins/guideline';\nimport { layoutPlugin } from '@atlaskit/editor-plugins/layout';\nimport { listPlugin } from '@atlaskit/editor-plugins/list';\nimport { mediaPlugin } from '@atlaskit/editor-plugins/media';\nimport { panelPlugin } from '@atlaskit/editor-plugins/panel';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { rulePlugin } from '@atlaskit/editor-plugins/rule';\nimport { selectionPlugin } from '@atlaskit/editor-plugins/selection';\nimport { selectionToolbarPlugin } from '@atlaskit/editor-plugins/selection-toolbar';\nimport { tablesPlugin } from '@atlaskit/editor-plugins/table';\nimport { tasksAndDecisionsPlugin } from '@atlaskit/editor-plugins/tasks-and-decisions';\nimport { textFormattingPlugin } from '@atlaskit/editor-plugins/text-formatting';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugins/type-ahead';\nimport { widthPlugin } from '@atlaskit/editor-plugins/width';\nimport { defaultValue } from './default-value';\nexport default function Editor(): React.JSX.Element {\n\tconst { preset } = usePreset((builder) =>\n\t\tbuilder\n\t\t\t.add(basePlugin)\n\t\t\t.add(blockTypePlugin)\n\t\t\t.add(focusPlugin)\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add(quickInsertPlugin)\n\t\t\t.add(selectionPlugin)\n\t\t\t.add(decorationsPlugin)\n\t\t\t.add(layoutPlugin)\n\t\t\t.add(listPlugin)\n\t\t\t.add([analyticsPlugin, {}])\n\t\t\t.add(contentInsertionPlugin)\n\t\t\t.add(widthPlugin)\n\t\t\t.add(guidelinePlugin)\n\t\t\t.add(textFormattingPlugin)\n\t\t\t.add([\n\t\t\t\ttablesPlugin,\n\t\t\t\t{\n\t\t\t\t\ttableOptions: {\n\t\t\t\t\t\tadvanced: true,\n\t\t\t\t\t\tallowColumnResizing: true,\n\t\t\t\t\t\tallowHeaderRow: true,\n\t\t\t\t\t\tallowTableResizing: true,\n\t\t\t\t\t},\n\t\t\t\t\tisTableScalingEnabled: true,\n\t\t\t\t\tallowContextualMenu: true,\n\t\t\t\t\tfullWidthEnabled: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add(emojiPlugin)\n\t\t\t.add(panelPlugin)\n\t\t\t.add(rulePlugin)\n\t\t\t.add(tasksAndDecisionsPlugin)\n\t\t\t.add([expandPlugin, { allowInsertion: true, appearance: 'full-page' }])\n\t\t\t.add(editorDisabledPlugin)\n\t\t\t.add(copyButtonPlugin)\n\t\t\t.add(compositionPlugin)\n\t\t\t.add(codeBlockPlugin)\n\t\t\t.add(blockControlsPlugin)\n\t\t\t.add(breakoutPlugin)\n\t\t\t.add(gridPlugin)\n\t\t\t.add(floatingToolbarPlugin)\n\t\t\t.add([selectionToolbarPlugin, { preferenceToolbarAboveSelection: true }])\n\t\t\t.add([\n\t\t\t\tmediaPlugin,\n\t\t\t\t{\n\t\t\t\t\tallowMediaSingle: { disableLayout: true },\n\t\t\t\t\tallowMediaGroup: false,\n\t\t\t\t\tallowResizing: true,\n\t\t\t\t\tisCopyPasteEnabled: true,\n\t\t\t\t\tallowBreakoutSnapPoints: true,\n\t\t\t\t\tallowAdvancedToolBarOptions: true,\n\t\t\t\t\tallowDropzoneDropLine: true,\n\t\t\t\t\tallowMediaSingleEditable: true,\n\t\t\t\t\tallowImagePreview: true,\n\t\t\t\t\tfullWidthEnabled: true,\n\t\t\t\t\twaitForMediaUpload: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add([\n\t\t\t\tannotationPlugin,\n\t\t\t\t{\n\t\t\t\t\tinlineComment: {},\n\t\t\t\t} as AnnotationProviders,\n\t\t\t])\n\t\t\t.add(extensionPlugin),\n\t);\n\treturn (\n\t\t<ComposableEditor\n\t\t\tappearance=\"full-page\"\n\t\t\tonEditorReady={(editorAction) => {\n\t\t\t\teditorAction.replaceDocument(defaultValue);\n\t\t\t}}\n\t\t\tonChange={(view) => {\n\t\t\t\tapplyDevTools(view);\n\t\t\t}}\n\t\t\tpreset={preset}\n\t\t/>\n\t);\n}"],
|
|
395
|
+
props: [{
|
|
396
|
+
name: 'api',
|
|
397
|
+
type: '{ blockControls: BasePluginDependenciesAPI<{ actions: { registerNodeDecoration: (factory: NodeDecorationFactory) => void; unregisterNodeDecoration: (type: string) => void; }; commands: { ...; }; dependencies: BlockControlsPluginDependencies; pluginConfiguration?: BlockControlsPluginConfig; sharedState: { ...; }; }>;...'
|
|
398
|
+
}, {
|
|
399
|
+
name: 'config',
|
|
400
|
+
type: '{ quickInsertButtonEnabled?: boolean; rightSideControlsEnabled?: boolean; }',
|
|
401
|
+
isRequired: true
|
|
402
|
+
}]
|
|
403
|
+
}, {
|
|
404
|
+
name: 'Editor Plugin Block Menu',
|
|
405
|
+
package: '@atlaskit/editor-plugin-block-menu',
|
|
406
|
+
description: 'BlockMenu plugin for @atlaskit/editor-core',
|
|
407
|
+
status: 'general-availability',
|
|
408
|
+
usageGuidelines: [],
|
|
409
|
+
contentGuidelines: [],
|
|
410
|
+
accessibilityGuidelines: [],
|
|
411
|
+
keywords: ['editor', 'editor-plugin-block-menu', 'atlaskit'],
|
|
412
|
+
category: 'editor',
|
|
413
|
+
examples: ["import type { RegisterBlockMenuComponent } from '../src/blockMenuPluginType';\nimport { createBlockMenuRegistry } from '../src/editor-actions';\nimport { BlockMenuRenderer } from '../src/ui/block-menu-renderer/BlockMenuRenderer';\nimport { BLOCK_MENU_FALLBACKS } from '../src/ui/block-menu-renderer/fallbacks';\nimport {\n\tregisterDeleteComponent,\n\tregisterDeleteSectionComponent,\n\tregisterMoveDownComponent,\n\tregisterMoveUpComponent,\n\tregisterMoveUpDownSectionComponent,\n\tregisterNestedMenu,\n} from './helpers/block-menu-components-definition';\nconst allComponents = [\n\tregisterMoveUpComponent,\n\tregisterMoveDownComponent,\n\tregisterDeleteComponent,\n\tregisterDeleteSectionComponent,\n\tregisterMoveUpDownSectionComponent,\n\tregisterNestedMenu,\n] as RegisterBlockMenuComponent[];\n/**\n * This example registers several components and uses a `BlockMenuRenderer` to render them.\n *\n * @returns A basic example of a block menu using the registry.\n */\nexport default function Basic(): React.JSX.Element {\n\tconst registry = createBlockMenuRegistry();\n\tregistry.register(allComponents);\n\treturn (\n\t\t<BlockMenuRenderer\n\t\t\tallRegisteredComponents={registry.components}\n\t\t\tfallbacks={BLOCK_MENU_FALLBACKS}\n\t\t/>\n\t);\n}"],
|
|
414
|
+
props: [{
|
|
415
|
+
name: 'api',
|
|
416
|
+
type: '{ blockMenu: BasePluginDependenciesAPI<{ actions: { getBlockMenuComponents: () => RegisterBlockMenuComponent[]; isTransformOptionDisabled: (optionNodeTypeName: string, optionNodeTypeAttrs?: Record<string, unknown>) => boolean; registerBlockMenuComponents: (blockMenuComponents: RegisterBlockMenuComponent[]) => void; ...'
|
|
417
|
+
}, {
|
|
418
|
+
name: 'config',
|
|
419
|
+
type: '{ blockLinkHashPrefix?: string; getLinkPath?: () => string; useStandardNodeWidth?: boolean; }',
|
|
420
|
+
isRequired: true
|
|
421
|
+
}]
|
|
422
|
+
}, {
|
|
423
|
+
name: 'Editor Plugin Connectivity',
|
|
424
|
+
package: '@atlaskit/editor-plugin-connectivity',
|
|
425
|
+
description: 'Connectivity plugin for @atlaskit/editor-core',
|
|
426
|
+
status: 'general-availability',
|
|
427
|
+
usageGuidelines: [],
|
|
428
|
+
contentGuidelines: [],
|
|
429
|
+
accessibilityGuidelines: [],
|
|
430
|
+
keywords: ['editor', 'editor-plugin-connectivity', 'atlaskit'],
|
|
431
|
+
category: 'editor',
|
|
432
|
+
examples: ["import React, { useState } from 'react';\nimport { IntlProvider } from 'react-intl';\nimport { DevTools } from '@af/editor-examples-helpers/utils';\nimport Button from '@atlaskit/button/new';\nimport { useSharedPluginState } from '@atlaskit/editor-common/hooks';\nimport type { PublicPluginAPI } from '@atlaskit/editor-common/types';\nimport type { EditorActions } from '@atlaskit/editor-core';\nimport { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { hyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';\nimport { primaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { annotationPlugin } from '@atlaskit/editor-plugins/annotation';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { cardPlugin } from '@atlaskit/editor-plugins/card';\nimport { connectivityPlugin, type ConnectivityPlugin } from '@atlaskit/editor-plugins/connectivity';\nimport { contentInsertionPlugin } from '@atlaskit/editor-plugins/content-insertion';\nimport { copyButtonPlugin } from '@atlaskit/editor-plugins/copy-button';\nimport { decorationsPlugin } from '@atlaskit/editor-plugins/decorations';\nimport { editorDisabledPlugin } from '@atlaskit/editor-plugins/editor-disabled';\nimport { emojiPlugin } from '@atlaskit/editor-plugins/emoji';\nimport { extensionPlugin } from '@atlaskit/editor-plugins/extension';\nimport { floatingToolbarPlugin } from '@atlaskit/editor-plugins/floating-toolbar';\nimport { focusPlugin } from '@atlaskit/editor-plugins/focus';\nimport { gridPlugin } from '@atlaskit/editor-plugins/grid';\nimport { guidelinePlugin } from '@atlaskit/editor-plugins/guideline';\nimport { insertBlockPlugin } from '@atlaskit/editor-plugins/insert-block';\nimport { layoutPlugin } from '@atlaskit/editor-plugins/layout';\nimport { loomPlugin } from '@atlaskit/editor-plugins/loom';\nimport { mediaPlugin } from '@atlaskit/editor-plugins/media';\nimport { mentionsPlugin } from '@atlaskit/editor-plugins/mentions';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { selectionPlugin } from '@atlaskit/editor-plugins/selection';\nimport { selectionToolbarPlugin } from '@atlaskit/editor-plugins/selection-toolbar';\nimport { tablesPlugin } from '@atlaskit/editor-plugins/table';\nimport { tasksAndDecisionsPlugin } from '@atlaskit/editor-plugins/tasks-and-decisions';\nimport { widthPlugin } from '@atlaskit/editor-plugins/width';\nimport type { EditorView } from '@atlaskit/editor-prosemirror/view';\nimport { useEditorAnnotationProviders } from '@atlaskit/editor-test-helpers/annotation-example';\nimport { cardProviderStaging } from '@atlaskit/editor-test-helpers/card-provider';\nimport { ConfluenceCardClient } from '@atlaskit/editor-test-helpers/confluence-card-client';\nimport { getExampleExtensionProviders } from '@atlaskit/editor-test-helpers/example-helpers';\nimport { storyMediaProviderFactory } from '@atlaskit/editor-test-helpers/media-provider';\nimport { SmartCardProvider } from '@atlaskit/link-provider';\nimport { Box, xcss } from '@atlaskit/primitives';\nimport { getEmojiResource } from '@atlaskit/util-data-test/get-emoji-resource';\nimport { mentionResourceProvider } from '@atlaskit/util-data-test/mention-story-data';\nimport { getLoomProvider } from './utils/provider/loom-provider';\nconst styles = xcss({ height: '100%' });\nconst smartCardClient = new ConfluenceCardClient('stg');\nfunction OfflineIndicator({\n\teditorApi,\n}: {\n\teditorApi: PublicPluginAPI<ConnectivityPlugin> | undefined;\n}) {\n\tconst { connectivityState } = useSharedPluginState(editorApi, ['connectivity']);\n\treturn (\n\t\t<Box as=\"span\" padding=\"space.100\">\n\t\t\tOffline status: {connectivityState?.mode}\n\t\t</Box>\n\t);\n}\nfunction SimulateMode() {\n\tconst [offline, setOffline] = useState(false);\n\treturn (\n\t\t<Button\n\t\t\tonClick={() => {\n\t\t\t\tif (!offline) {\n\t\t\t\t\tsetOffline(true);\n\t\t\t\t\twindow.dispatchEvent(new Event('offline'));\n\t\t\t\t} else {\n\t\t\t\t\tsetOffline(false);\n\t\t\t\t\twindow.dispatchEvent(new Event('online'));\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\tSimulate {offline ? 'online' : 'offline'}\n\t\t</Button>\n\t);\n}\nfunction Editor() {\n\tconst editorAnnotationProviders = useEditorAnnotationProviders();\n\tconst { preset, editorApi } = usePreset((builder) =>\n\t\tbuilder\n\t\t\t.add(basePlugin)\n\t\t\t.add(blockTypePlugin)\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add([\n\t\t\t\tquickInsertPlugin,\n\t\t\t\t{\n\t\t\t\t\tenableElementBrowser: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add(hyperlinkPlugin)\n\t\t\t.add(widthPlugin)\n\t\t\t.add([\n\t\t\t\tinsertBlockPlugin,\n\t\t\t\t{\n\t\t\t\t\tshowElementBrowserLink: true,\n\t\t\t\t\tappearance: 'full-page',\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add(editorDisabledPlugin)\n\t\t\t.add(decorationsPlugin)\n\t\t\t.add(copyButtonPlugin)\n\t\t\t.add(floatingToolbarPlugin)\n\t\t\t.add(selectionPlugin)\n\t\t\t.add(guidelinePlugin)\n\t\t\t.add(gridPlugin)\n\t\t\t.add(focusPlugin)\n\t\t\t.add([\n\t\t\t\tmediaPlugin,\n\t\t\t\t{\n\t\t\t\t\tprovider: storyMediaProviderFactory(),\n\t\t\t\t\tallowMediaSingle: true,\n\t\t\t\t\tallowMediaSingleEditable: true,\n\t\t\t\t\tallowLinking: true,\n\t\t\t\t\tallowCommentsOnMedia: true,\n\t\t\t\t\tallowAdvancedToolBarOptions: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add([analyticsPlugin, {}])\n\t\t\t.add(contentInsertionPlugin)\n\t\t\t.add(mentionsPlugin)\n\t\t\t.add([tablesPlugin, { tableOptions: { advanced: true } }])\n\t\t\t.add([emojiPlugin, { emojiProvider: getEmojiResource() }])\n\t\t\t.add([cardPlugin, { provider: Promise.resolve(cardProviderStaging) }])\n\t\t\t.add(layoutPlugin)\n\t\t\t.add([selectionToolbarPlugin, {}])\n\t\t\t.add(tasksAndDecisionsPlugin)\n\t\t\t.add([annotationPlugin, editorAnnotationProviders])\n\t\t\t.add([\n\t\t\t\tloomPlugin,\n\t\t\t\t{\n\t\t\t\t\t...getLoomProvider({\n\t\t\t\t\t\t// NOTE: DEV MOVE - A public key referencing a sandbox loom account, this will eventially be substituted\n\t\t\t\t\t\t// for a session token that will intialise the SDK.\n\t\t\t\t\t\tpublicAppId: '4dc78821-b6d2-44ee-ab43-54d0494290c8',\n\t\t\t\t\t}),\n\t\t\t\t\tshouldShowToolbarButton: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add(primaryToolbarPlugin)\n\t\t\t.add(connectivityPlugin)\n\t\t\t.add(extensionPlugin),\n\t);\n\tconst [editorView, setEditorView] = React.useState<EditorView>();\n\tconst onReady = React.useCallback((editorActions: EditorActions<any>) => {\n\t\tsetEditorView(editorActions._privateGetEditorView());\n\t}, []);\n\treturn (\n\t\t<Box xcss={styles}>\n\t\t\t<SimulateMode />\n\t\t\t<DevTools editorView={editorView} />\n\t\t\t<OfflineIndicator editorApi={editorApi} />\n\t\t\t<ComposableEditor\n\t\t\t\tappearance=\"full-page\"\n\t\t\t\tpreset={preset}\n\t\t\t\tonEditorReady={onReady}\n\t\t\t\tmentionProvider={Promise.resolve(mentionResourceProvider)}\n\t\t\t\textensionProviders={(editorActions?: EditorActions) => [\n\t\t\t\t\tgetExampleExtensionProviders(editorApi, editorActions),\n\t\t\t\t]}\n\t\t\t/>\n\t\t</Box>\n\t);\n}\nexport default (): React.JSX.Element => {\n\treturn (\n\t\t<IntlProvider locale=\"en\">\n\t\t\t<SmartCardProvider client={smartCardClient}>\n\t\t\t\t<Editor />\n\t\t\t</SmartCardProvider>\n\t\t</IntlProvider>\n\t);\n};"],
|
|
433
|
+
props: [{
|
|
434
|
+
name: 'api',
|
|
435
|
+
type: '{ connectivity: BasePluginDependenciesAPI<{ commands: { setMode: (mode: Mode) => EditorCommand; }; sharedState: PublicPluginState; }>; } & RequiredPluginDependenciesAPI<...> & OptionalPluginDependenciesAPI<...>'
|
|
436
|
+
}, {
|
|
437
|
+
name: 'config',
|
|
438
|
+
type: 'undefined',
|
|
439
|
+
isRequired: true
|
|
440
|
+
}]
|
|
441
|
+
}, {
|
|
442
|
+
name: 'Editor Plugin Extension',
|
|
443
|
+
package: '@atlaskit/editor-plugin-extension',
|
|
444
|
+
description: 'editor-plugin-extension plugin for @atlaskit/editor-core',
|
|
445
|
+
status: 'general-availability',
|
|
446
|
+
usageGuidelines: [],
|
|
447
|
+
contentGuidelines: [],
|
|
448
|
+
accessibilityGuidelines: [],
|
|
449
|
+
keywords: ['editor', 'editor-plugin-extension', 'atlaskit'],
|
|
450
|
+
category: 'editor',
|
|
451
|
+
examples: ["import { combineExtensionProviders } from '@atlaskit/editor-common/extensions';\nimport { getXProductExtensionProvider } from '@atlaskit/editor-test-helpers/example-helpers';\nimport ConfigPanelWithExtensionPicker from '../example-utils/config-panel/ConfigPanelWithExtensionPicker';\nexport default function Example(): React.JSX.Element {\n\tconst extensionProvider = combineExtensionProviders([getXProductExtensionProvider()]);\n\treturn <ConfigPanelWithExtensionPicker extensionProvider={extensionProvider} />;\n}", "import {\n\tcombineExtensionProviders,\n\tDefaultExtensionProvider,\n} from '@atlaskit/editor-common/extensions';\nimport ConfigPanelWithExtensionPicker from '../example-utils/config-panel/ConfigPanelWithExtensionPicker';\nimport exampleManifest from '../example-utils/config-panel/example-manifest-all-fields';\nconst parameters = {\n\t'text-field': 'Hi',\n\t'text-field-multiline': 'Hello\\nWorld',\n\t'text-field-optional': '',\n\t'text-field-hidden': 'this is a hidden value passed to the extension',\n\t'number-field': '1234567',\n\t'date-start': '2020-01-18',\n\t'enum-select': 'a',\n\t'enum-select-icon': ['b', 'c', 'd'],\n\t'enum-select-icon-multiple': 'long',\n\t'enum-checkbox-multiple': ['a', 'b'],\n\t'fieldset-cql': 'created-at = now(-1w) AND query = foobar AND flag = BF',\n\t'fieldset-jira-filter': 'keywords = editor AND project = editor-platform AND status = to-do',\n\t'custom-required': 'meeting-notes',\n\t'custom-create-multiple': ['XR', 'FF'],\n};\nconst extensionProvider = combineExtensionProviders([\n\tnew DefaultExtensionProvider([exampleManifest]),\n]);\nexport default function Example(): React.JSX.Element {\n\treturn (\n\t\t<ConfigPanelWithExtensionPicker extensionProvider={extensionProvider} parameters={parameters} />\n\t);\n}"],
|
|
452
|
+
props: [{
|
|
453
|
+
name: 'api',
|
|
454
|
+
type: '{ extension: BasePluginDependenciesAPI<{ actions: ExtensionPluginActions; dependencies: ExtensionPluginDependencies; pluginConfiguration: ExtensionPluginOptions; sharedState: { ...; }; }>; } & RequiredPluginDependenciesAPI<...> & OptionalPluginDependenciesAPI<...>'
|
|
455
|
+
}, {
|
|
456
|
+
name: 'config',
|
|
457
|
+
type: 'ExtensionPluginOptions',
|
|
458
|
+
isRequired: true
|
|
459
|
+
}]
|
|
460
|
+
}, {
|
|
461
|
+
name: 'Editor Plugin Highlight',
|
|
462
|
+
package: '@atlaskit/editor-plugin-highlight',
|
|
463
|
+
description: 'Highlight plugin for @atlaskit/editor-core',
|
|
464
|
+
status: 'general-availability',
|
|
465
|
+
usageGuidelines: [],
|
|
466
|
+
contentGuidelines: [],
|
|
467
|
+
accessibilityGuidelines: [],
|
|
468
|
+
keywords: ['editor', 'editor-plugin-highlight', 'atlaskit'],
|
|
469
|
+
category: 'editor',
|
|
470
|
+
examples: ["import { AnnotationTypes } from '@atlaskit/adf-schema';\nimport { AnnotationUpdateEmitter } from '@atlaskit/editor-common/annotation';\nimport { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { emojiPlugin } from '@atlaskit/editor-plugin-emoji';\nimport { primaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { annotationPlugin } from '@atlaskit/editor-plugins/annotation';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { contentInsertionPlugin } from '@atlaskit/editor-plugins/content-insertion';\nimport { copyButtonPlugin } from '@atlaskit/editor-plugins/copy-button';\nimport { decorationsPlugin } from '@atlaskit/editor-plugins/decorations';\nimport { editorDisabledPlugin } from '@atlaskit/editor-plugins/editor-disabled';\nimport { floatingToolbarPlugin } from '@atlaskit/editor-plugins/floating-toolbar';\nimport { guidelinePlugin } from '@atlaskit/editor-plugins/guideline';\nimport { highlightPlugin } from '@atlaskit/editor-plugins/highlight';\nimport { historyPlugin } from '@atlaskit/editor-plugins/history';\nimport { insertBlockPlugin } from '@atlaskit/editor-plugins/insert-block';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { selectionPlugin } from '@atlaskit/editor-plugins/selection';\nimport { selectionToolbarPlugin } from '@atlaskit/editor-plugins/selection-toolbar';\nimport { statusPlugin } from '@atlaskit/editor-plugins/status';\nimport { tablesPlugin } from '@atlaskit/editor-plugins/table';\nimport type { TablePluginOptions } from '@atlaskit/editor-plugins/table';\nimport { textColorPlugin } from '@atlaskit/editor-plugins/text-color';\nimport { textFormattingPlugin } from '@atlaskit/editor-plugins/text-formatting';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugins/type-ahead';\nimport { undoRedoPlugin } from '@atlaskit/editor-plugins/undo-redo';\nimport { widthPlugin } from '@atlaskit/editor-plugins/width';\nimport {\n\tExampleCreateInlineCommentComponent,\n\tExampleViewInlineCommentComponent,\n} from '@atlaskit/editor-test-helpers/example-helpers';\nimport { getEmojiProvider } from '@atlaskit/util-data-test/get-emoji-provider';\nconst highlightAdfDoc = {\n\ttype: 'doc',\n\tversion: 1,\n\tcontent: [\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttext: 'Highlights: ',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttext: 'Light Gray',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#dcdfe4' } }],\n\t\t\t\t},\n\t\t\t\t{ text: ', ', type: 'text' },\n\t\t\t\t{\n\t\t\t\t\ttext: 'Light Teal',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#c6edfb' } }],\n\t\t\t\t},\n\t\t\t\t{ text: ', ', type: 'text' },\n\t\t\t\t{\n\t\t\t\t\ttext: 'Light Lime',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#d3f1a7' } }],\n\t\t\t\t},\n\t\t\t\t{ text: ', ', type: 'text' },\n\t\t\t\t{\n\t\t\t\t\ttext: 'Light Orange',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#fedec8' } }],\n\t\t\t\t},\n\t\t\t\t{ text: ', ', type: 'text' },\n\t\t\t\t{\n\t\t\t\t\ttext: 'Light Magenta',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#fdd0ec' } }],\n\t\t\t\t},\n\t\t\t\t{ text: ', ', type: 'text' },\n\t\t\t\t{\n\t\t\t\t\ttext: 'Light Purple',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#dfd8fd' } }],\n\t\t\t\t},\n\t\t\t\t{ text: ', ', type: 'text' },\n\t\t\t\t{\n\t\t\t\t\ttext: 'Custom: black',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#000000' } }],\n\t\t\t\t},\n\t\t\t\t{ text: ', ', type: 'text' },\n\t\t\t\t{\n\t\t\t\t\ttext: 'Custom: white',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#ffffff' } }],\n\t\t\t\t},\n\t\t\t\t{ text: ', ', type: 'text' },\n\t\t\t\t{\n\t\t\t\t\ttext: 'Custom: red',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#c9372c' } }],\n\t\t\t\t},\n\t\t\t\t{ text: ', ', type: 'text' },\n\t\t\t\t{\n\t\t\t\t\ttext: 'Custom: yellow',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#f8e6a0' } }],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttext: ', No highlight',\n\t\t\t\t\ttype: 'text',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'this is ',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'status',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\ttext: 'some ',\n\t\t\t\t\t\tcolor: 'neutral',\n\t\t\t\t\t\tlocalId: '1d3d429b-a8d9-4340-beb0-0647bd0b20d4',\n\t\t\t\t\t\tstyle: '',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'emoji',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tshortName: ':slight_smile:',\n\t\t\t\t\t\tid: '1f642',\n\t\t\t\t\t\ttext: '🙂',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: ' text with ',\n\t\t\t\t\tmarks: [{ type: 'backgroundColor', attrs: { color: '#fdd0ec' } }],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'inline',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{ type: 'backgroundColor', attrs: { color: '#dfd8fd' } },\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'annotation',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: 'annotation-id',\n\t\t\t\t\t\t\t\tannotationType: AnnotationTypes.INLINE_COMMENT,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: ' nodes',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'annotation',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: 'annotation-id',\n\t\t\t\t\t\t\t\tannotationType: AnnotationTypes.INLINE_COMMENT,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'table',\n\t\t\tattrs: {\n\t\t\t\tisNumberColumnEnabled: false,\n\t\t\t\tlayout: 'default',\n\t\t\t\tlocalId: '7c2ef57c-0a6d-43bf-822c-67803b11f46f',\n\t\t\t\twidth: 760,\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'tableRow',\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableHeader',\n\t\t\t\t\t\t\tattrs: {},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Highlight in table',\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\tmarks: [\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\t\t\t\t\t\t\tattrs: { color: '#c6edfb' },\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableHeader',\n\t\t\t\t\t\t\tattrs: {},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableHeader',\n\t\t\t\t\t\t\tattrs: {},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'tableRow',\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'tableRow',\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Highlight ',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tcolor: '#c6edfb',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'over',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tcolor: '#c6edfb',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'annotation',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: 'annotation-id',\n\t\t\t\t\t\t\t\tannotationType: AnnotationTypes.INLINE_COMMENT,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: ' comment',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tcolor: '#c6edfb',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Comment ',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'annotation',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: 'annotation-id',\n\t\t\t\t\t\t\t\tannotationType: AnnotationTypes.INLINE_COMMENT,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'over',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tcolor: '#d3f1a7',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'annotation',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: 'annotation-id',\n\t\t\t\t\t\t\t\tannotationType: AnnotationTypes.INLINE_COMMENT,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: ' highlight',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'annotation',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: 'annotation-id',\n\t\t\t\t\t\t\t\tannotationType: AnnotationTypes.INLINE_COMMENT,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Partially ',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tcolor: '#fedec8',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'overlapping',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tcolor: '#fedec8',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'annotation',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: 'annotation-id',\n\t\t\t\t\t\t\t\tannotationType: AnnotationTypes.INLINE_COMMENT,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: ' comment',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'annotation',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tid: 'annotation-id',\n\t\t\t\t\t\t\t\tannotationType: AnnotationTypes.INLINE_COMMENT,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Adjacent ',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tcolor: '#d3f1a7',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'highlights',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tcolor: '#c6edfb',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: ' example',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'backgroundColor',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tcolor: '#fedec8',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t],\n};\nconst emitter = new AnnotationUpdateEmitter();\nconst Editor = (): React.JSX.Element => {\n\tconst tableOptions = {\n\t\ttableOptions: {\n\t\t\tadvanced: true,\n\t\t\tallowNumberColumn: true,\n\t\t\tallowHeaderRow: true,\n\t\t\tallowHeaderColumn: true,\n\t\t\tpermittedLayouts: 'all',\n\t\t},\n\t\tallowContextualMenu: true,\n\t} as TablePluginOptions;\n\tconst { preset } = usePreset((builder) =>\n\t\tbuilder\n\t\t\t.add(basePlugin)\n\t\t\t.add(historyPlugin)\n\t\t\t.add([analyticsPlugin, {}])\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add(primaryToolbarPlugin)\n\t\t\t.add(undoRedoPlugin)\n\t\t\t.add(textFormattingPlugin)\n\t\t\t.add(textColorPlugin)\n\t\t\t.add(statusPlugin)\n\t\t\t.add(contentInsertionPlugin)\n\t\t\t.add(widthPlugin)\n\t\t\t.add(guidelinePlugin)\n\t\t\t.add(selectionPlugin)\n\t\t\t.add([selectionToolbarPlugin, { preferenceToolbarAboveSelection: true }])\n\t\t\t.add(quickInsertPlugin)\n\t\t\t.add([tablesPlugin, tableOptions])\n\t\t\t.add([\n\t\t\t\tinsertBlockPlugin,\n\t\t\t\t{\n\t\t\t\t\tallowTables: true,\n\t\t\t\t\tallowExpand: true,\n\t\t\t\t\ttableSelectorSupported: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add([\n\t\t\t\tannotationPlugin,\n\t\t\t\t{\n\t\t\t\t\tinlineComment: {\n\t\t\t\t\t\tcreateComponent: ExampleCreateInlineCommentComponent,\n\t\t\t\t\t\tviewComponent: ExampleViewInlineCommentComponent,\n\t\t\t\t\t\tupdateSubscriber: emitter,\n\t\t\t\t\t\tgetState: async (annotationsIds: string[]) => {\n\t\t\t\t\t\t\treturn annotationsIds.map((id) => ({\n\t\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\t\tannotationType: 'inlineComment',\n\t\t\t\t\t\t\t\tstate: { resolved: false },\n\t\t\t\t\t\t\t})) as any;\n\t\t\t\t\t\t},\n\t\t\t\t\t\tdisallowOnWhitespace: true,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add(decorationsPlugin)\n\t\t\t.add(copyButtonPlugin)\n\t\t\t.add(editorDisabledPlugin)\n\t\t\t.add(floatingToolbarPlugin)\n\t\t\t.add(emojiPlugin)\n\t\t\t.add(highlightPlugin),\n\t);\n\treturn (\n\t\t<ComposableEditor\n\t\t\tappearance=\"full-page\"\n\t\t\tpreset={preset}\n\t\t\tdefaultValue={highlightAdfDoc}\n\t\t\temojiProvider={getEmojiProvider()}\n\t\t/>\n\t);\n};\nexport default Editor;"],
|
|
471
|
+
props: [{
|
|
472
|
+
name: 'api',
|
|
473
|
+
type: '{ highlight: BasePluginDependenciesAPI<{ commands: { changeColor: ({ color }: { color: string; inputMethod: INPUT_METHOD; }) => EditorCommand; }; dependencies: [OptionalPlugin<NextEditorPluginFunctionOptionalConfigDefinition<"analytics", { actions: EditorAnalyticsAPI; dependencies: [...]; pluginConfiguration: Analyt...'
|
|
474
|
+
}, {
|
|
475
|
+
name: 'config',
|
|
476
|
+
type: 'undefined',
|
|
477
|
+
isRequired: true
|
|
478
|
+
}]
|
|
479
|
+
}, {
|
|
480
|
+
name: 'Editor Plugin Selection Marker',
|
|
481
|
+
package: '@atlaskit/editor-plugin-selection-marker',
|
|
482
|
+
description: 'Selection marker plugin for @atlaskit/editor-core.',
|
|
483
|
+
status: 'general-availability',
|
|
484
|
+
usageGuidelines: [],
|
|
485
|
+
contentGuidelines: [],
|
|
486
|
+
accessibilityGuidelines: [],
|
|
487
|
+
keywords: ['editor', 'editor-plugin-selection-marker', 'atlaskit'],
|
|
488
|
+
category: 'editor',
|
|
489
|
+
examples: ["import { EditorPresetBuilder } from '@atlaskit/editor-common/preset';\nimport { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { focusPlugin } from '@atlaskit/editor-plugins/focus';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { selectionMarkerPlugin } from '@atlaskit/editor-plugins/selection-marker';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugins/type-ahead';\nexport default function Editor(): React.JSX.Element {\n\tconst { preset } = usePreset(() =>\n\t\tnew EditorPresetBuilder()\n\t\t\t.add(basePlugin)\n\t\t\t.add(blockTypePlugin)\n\t\t\t.add(focusPlugin)\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add(quickInsertPlugin)\n\t\t\t.add(selectionMarkerPlugin),\n\t);\n\treturn <ComposableEditor preset={preset} />;\n}"],
|
|
490
|
+
props: [{
|
|
491
|
+
name: 'api',
|
|
492
|
+
type: '{ selectionMarker: BasePluginDependenciesAPI<{ actions: { hideDecoration: () => ReleaseHiddenDecoration; queueHideDecoration: (setCleanup: SetCleanup) => () => void; }; dependencies: [...]; pluginConfiguration?: SelectionMarkerPluginOptions; sharedState: { ...; }; }>; } & RequiredPluginDependenciesAPI<...> & Optiona...'
|
|
493
|
+
}, {
|
|
494
|
+
name: 'config',
|
|
495
|
+
type: '{ hideCursorOnInit?: boolean; }',
|
|
496
|
+
isRequired: true
|
|
497
|
+
}]
|
|
498
|
+
}, {
|
|
499
|
+
name: 'Editor Plugin Selection Toolbar',
|
|
500
|
+
package: '@atlaskit/editor-plugin-selection-toolbar',
|
|
501
|
+
description: '@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core',
|
|
502
|
+
status: 'general-availability',
|
|
503
|
+
usageGuidelines: [],
|
|
504
|
+
contentGuidelines: [],
|
|
505
|
+
accessibilityGuidelines: [],
|
|
506
|
+
keywords: ['editor', 'editor-plugin-selection-toolbar', 'atlaskit'],
|
|
507
|
+
category: 'editor',
|
|
508
|
+
examples: ["import applyDevTools from 'prosemirror-dev-tools';\nimport { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { annotationPlugin } from '@atlaskit/editor-plugins/annotation';\nimport type { AnnotationProviders } from '@atlaskit/editor-plugins/annotation';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockControlsPlugin } from '@atlaskit/editor-plugins/block-controls';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { breakoutPlugin } from '@atlaskit/editor-plugins/breakout';\nimport { codeBlockPlugin } from '@atlaskit/editor-plugins/code-block';\nimport { compositionPlugin } from '@atlaskit/editor-plugins/composition';\nimport { contentInsertionPlugin } from '@atlaskit/editor-plugins/content-insertion';\nimport { copyButtonPlugin } from '@atlaskit/editor-plugins/copy-button';\nimport { decorationsPlugin } from '@atlaskit/editor-plugins/decorations';\nimport { editorDisabledPlugin } from '@atlaskit/editor-plugins/editor-disabled';\nimport { emojiPlugin } from '@atlaskit/editor-plugins/emoji';\nimport { expandPlugin } from '@atlaskit/editor-plugins/expand';\nimport { extensionPlugin } from '@atlaskit/editor-plugins/extension';\nimport { floatingToolbarPlugin } from '@atlaskit/editor-plugins/floating-toolbar';\nimport { focusPlugin } from '@atlaskit/editor-plugins/focus';\nimport { gridPlugin } from '@atlaskit/editor-plugins/grid';\nimport { guidelinePlugin } from '@atlaskit/editor-plugins/guideline';\nimport { layoutPlugin } from '@atlaskit/editor-plugins/layout';\nimport { listPlugin } from '@atlaskit/editor-plugins/list';\nimport { mediaPlugin } from '@atlaskit/editor-plugins/media';\nimport { panelPlugin } from '@atlaskit/editor-plugins/panel';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { rulePlugin } from '@atlaskit/editor-plugins/rule';\nimport { selectionPlugin } from '@atlaskit/editor-plugins/selection';\nimport { selectionToolbarPlugin } from '@atlaskit/editor-plugins/selection-toolbar';\nimport { tablesPlugin } from '@atlaskit/editor-plugins/table';\nimport { tasksAndDecisionsPlugin } from '@atlaskit/editor-plugins/tasks-and-decisions';\nimport { textFormattingPlugin } from '@atlaskit/editor-plugins/text-formatting';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugins/type-ahead';\nimport { widthPlugin } from '@atlaskit/editor-plugins/width';\nimport { LocalUserPreferencesProvider } from './user-preferences-provider';\nexport default function Editor(): React.JSX.Element {\n\tconst localUserPreferencesProvider = new LocalUserPreferencesProvider();\n\tconst { preset } = usePreset((builder) =>\n\t\tbuilder\n\t\t\t.add(basePlugin)\n\t\t\t.add(blockTypePlugin)\n\t\t\t.add(focusPlugin)\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add(quickInsertPlugin)\n\t\t\t.add(selectionPlugin)\n\t\t\t.add(decorationsPlugin)\n\t\t\t.add(layoutPlugin)\n\t\t\t.add(listPlugin)\n\t\t\t.add([analyticsPlugin, {}])\n\t\t\t.add(contentInsertionPlugin)\n\t\t\t.add(widthPlugin)\n\t\t\t.add(guidelinePlugin)\n\t\t\t.add(textFormattingPlugin)\n\t\t\t.add([\n\t\t\t\ttablesPlugin,\n\t\t\t\t{\n\t\t\t\t\ttableOptions: {\n\t\t\t\t\t\tadvanced: true,\n\t\t\t\t\t\tallowColumnResizing: true,\n\t\t\t\t\t\tallowHeaderRow: true,\n\t\t\t\t\t\tallowTableResizing: true,\n\t\t\t\t\t},\n\t\t\t\t\tisTableScalingEnabled: true,\n\t\t\t\t\tallowContextualMenu: true,\n\t\t\t\t\tfullWidthEnabled: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add(emojiPlugin)\n\t\t\t.add(panelPlugin)\n\t\t\t.add(rulePlugin)\n\t\t\t.add(tasksAndDecisionsPlugin)\n\t\t\t.add([expandPlugin, { allowInsertion: true, appearance: 'full-page' }])\n\t\t\t.add(editorDisabledPlugin)\n\t\t\t.add(copyButtonPlugin)\n\t\t\t.add(compositionPlugin)\n\t\t\t.add(codeBlockPlugin)\n\t\t\t.add(blockControlsPlugin)\n\t\t\t.add(breakoutPlugin)\n\t\t\t.add(gridPlugin)\n\t\t\t.add(floatingToolbarPlugin)\n\t\t\t.add([\n\t\t\t\tselectionToolbarPlugin,\n\t\t\t\t{\n\t\t\t\t\tpreferenceToolbarAboveSelection: true,\n\t\t\t\t\tcontextualFormattingEnabled: true,\n\t\t\t\t\tuserPreferencesProvider: localUserPreferencesProvider,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add([\n\t\t\t\tmediaPlugin,\n\t\t\t\t{\n\t\t\t\t\tallowMediaSingle: { disableLayout: true },\n\t\t\t\t\tallowMediaGroup: false,\n\t\t\t\t\tallowResizing: true,\n\t\t\t\t\tisCopyPasteEnabled: true,\n\t\t\t\t\tallowBreakoutSnapPoints: true,\n\t\t\t\t\tallowAdvancedToolBarOptions: true,\n\t\t\t\t\tallowDropzoneDropLine: true,\n\t\t\t\t\tallowMediaSingleEditable: true,\n\t\t\t\t\tallowImagePreview: true,\n\t\t\t\t\tfullWidthEnabled: true,\n\t\t\t\t\twaitForMediaUpload: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add([\n\t\t\t\tannotationPlugin,\n\t\t\t\t{\n\t\t\t\t\tinlineComment: {},\n\t\t\t\t} as AnnotationProviders,\n\t\t\t])\n\t\t\t.add(extensionPlugin),\n\t);\n\treturn (\n\t\t<ComposableEditor\n\t\t\tappearance=\"full-page\"\n\t\t\tonChange={(view) => {\n\t\t\t\tapplyDevTools(view);\n\t\t\t}}\n\t\t\tpreset={preset}\n\t\t/>\n\t);\n}"],
|
|
509
|
+
props: [{
|
|
510
|
+
name: 'api',
|
|
511
|
+
type: '{ selectionToolbar: BasePluginDependenciesAPI<{ actions?: { forceToolbarDockingWithoutAnalytics?: (toolbarDocking: ToolbarDocking) => boolean; refreshToolbarDocking?: () => boolean; setToolbarDocking?: (toolbarDocking: ToolbarDocking) => boolean; suppressToolbar?: () => boolean; unsuppressToolbar?: () => boolean; };...'
|
|
512
|
+
}, {
|
|
513
|
+
name: 'config',
|
|
514
|
+
type: '{ contextualFormattingEnabled?: boolean; disablePin?: boolean; preferenceToolbarAboveSelection?: boolean; userPreferencesProvider?: UserPreferencesProvider; }',
|
|
515
|
+
isRequired: true
|
|
516
|
+
}]
|
|
517
|
+
}, {
|
|
518
|
+
name: 'Editor Plugin Show Diff',
|
|
519
|
+
package: '@atlaskit/editor-plugin-show-diff',
|
|
520
|
+
description: 'ShowDiff plugin for @atlaskit/editor-core',
|
|
521
|
+
status: 'general-availability',
|
|
522
|
+
usageGuidelines: [],
|
|
523
|
+
contentGuidelines: [],
|
|
524
|
+
accessibilityGuidelines: [],
|
|
525
|
+
keywords: ['editor', 'editor-plugin-show-diff', 'atlaskit'],
|
|
526
|
+
category: 'editor',
|
|
527
|
+
examples: ["import React, { useState } from 'react';\nimport applyDevTools from 'prosemirror-dev-tools';\nimport Button from '@atlaskit/button/new';\nimport { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { showDiffPlugin } from '@atlaskit/editor-plugin-show-diff';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { annotationPlugin } from '@atlaskit/editor-plugins/annotation';\nimport type { AnnotationProviders } from '@atlaskit/editor-plugins/annotation';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockControlsPlugin } from '@atlaskit/editor-plugins/block-controls';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { breakoutPlugin } from '@atlaskit/editor-plugins/breakout';\nimport { captionPlugin } from '@atlaskit/editor-plugins/caption';\nimport { cardPlugin } from '@atlaskit/editor-plugins/card';\nimport { codeBlockPlugin } from '@atlaskit/editor-plugins/code-block';\nimport { compositionPlugin } from '@atlaskit/editor-plugins/composition';\nimport { contentInsertionPlugin } from '@atlaskit/editor-plugins/content-insertion';\nimport { copyButtonPlugin } from '@atlaskit/editor-plugins/copy-button';\nimport { decorationsPlugin } from '@atlaskit/editor-plugins/decorations';\nimport { editorDisabledPlugin } from '@atlaskit/editor-plugins/editor-disabled';\nimport { editorViewModePlugin } from '@atlaskit/editor-plugins/editor-viewmode';\nimport { emojiPlugin } from '@atlaskit/editor-plugins/emoji';\nimport { expandPlugin } from '@atlaskit/editor-plugins/expand';\nimport { extensionPlugin } from '@atlaskit/editor-plugins/extension';\nimport { floatingToolbarPlugin } from '@atlaskit/editor-plugins/floating-toolbar';\nimport { focusPlugin } from '@atlaskit/editor-plugins/focus';\nimport { gridPlugin } from '@atlaskit/editor-plugins/grid';\nimport { guidelinePlugin } from '@atlaskit/editor-plugins/guideline';\nimport { hyperlinkPlugin } from '@atlaskit/editor-plugins/hyperlink';\nimport { layoutPlugin } from '@atlaskit/editor-plugins/layout';\nimport { listPlugin } from '@atlaskit/editor-plugins/list';\nimport { mediaPlugin } from '@atlaskit/editor-plugins/media';\nimport { mentionsPlugin } from '@atlaskit/editor-plugins/mentions';\nimport { panelPlugin } from '@atlaskit/editor-plugins/panel';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { rulePlugin } from '@atlaskit/editor-plugins/rule';\nimport { selectionPlugin } from '@atlaskit/editor-plugins/selection';\nimport { statusPlugin } from '@atlaskit/editor-plugins/status';\nimport { tablesPlugin } from '@atlaskit/editor-plugins/table';\nimport { tasksAndDecisionsPlugin } from '@atlaskit/editor-plugins/tasks-and-decisions';\nimport { textFormattingPlugin } from '@atlaskit/editor-plugins/text-formatting';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugins/type-ahead';\nimport { unsupportedContentPlugin } from '@atlaskit/editor-plugins/unsupported-content';\nimport { widthPlugin } from '@atlaskit/editor-plugins/width';\nimport type { ColorScheme } from '../src/showDiffPluginType';\nconst step1 = {\n\tuserId: 'ari:cloud:identity::user/123',\n\tclientId: 123,\n\tfrom: 1,\n\tto: 5,\n\tstepType: 'replace',\n\tslice: {\n\t\tcontent: [{ type: 'text', text: 'abc', content: [], attrs: {}, marks: [] }],\n\t\topenStart: 0,\n\t\topenEnd: 0,\n\t},\n};\nexport default function Editor(): React.JSX.Element {\n\tconst [colorScheme, setColorScheme] = useState<ColorScheme>('traditional');\n\tconst { preset } = usePreset(\n\t\t(builder) =>\n\t\t\tbuilder\n\t\t\t\t.add(basePlugin)\n\t\t\t\t.add(blockTypePlugin)\n\t\t\t\t.add(focusPlugin)\n\t\t\t\t.add(typeAheadPlugin)\n\t\t\t\t.add(quickInsertPlugin)\n\t\t\t\t.add(selectionPlugin)\n\t\t\t\t.add(decorationsPlugin)\n\t\t\t\t.add(layoutPlugin)\n\t\t\t\t.add(listPlugin)\n\t\t\t\t.add([analyticsPlugin, {}])\n\t\t\t\t.add(contentInsertionPlugin)\n\t\t\t\t.add(widthPlugin)\n\t\t\t\t.add(statusPlugin)\n\t\t\t\t.add(guidelinePlugin)\n\t\t\t\t.add(textFormattingPlugin)\n\t\t\t\t.add([\n\t\t\t\t\ttablesPlugin,\n\t\t\t\t\t{\n\t\t\t\t\t\ttableOptions: {\n\t\t\t\t\t\t\tadvanced: true,\n\t\t\t\t\t\t\tallowColumnResizing: true,\n\t\t\t\t\t\t\tallowHeaderRow: true,\n\t\t\t\t\t\t\tallowTableResizing: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tisTableScalingEnabled: true,\n\t\t\t\t\t\tallowContextualMenu: true,\n\t\t\t\t\t\tfullWidthEnabled: true,\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t\t.add(emojiPlugin)\n\t\t\t\t.add(hyperlinkPlugin)\n\t\t\t\t.add(unsupportedContentPlugin)\n\t\t\t\t.add(mentionsPlugin)\n\t\t\t\t.add(panelPlugin)\n\t\t\t\t.add(rulePlugin)\n\t\t\t\t.add(tasksAndDecisionsPlugin)\n\t\t\t\t.add([expandPlugin, { allowInsertion: true, appearance: 'full-page' }])\n\t\t\t\t.add(editorDisabledPlugin)\n\t\t\t\t.add(copyButtonPlugin)\n\t\t\t\t.add(compositionPlugin)\n\t\t\t\t.add(codeBlockPlugin)\n\t\t\t\t.add(blockControlsPlugin)\n\t\t\t\t.add(breakoutPlugin)\n\t\t\t\t.add(gridPlugin)\n\t\t\t\t.add(floatingToolbarPlugin)\n\t\t\t\t.add([cardPlugin, { allowBlockCards: true, allowEmbeds: true }])\n\t\t\t\t.add([editorViewModePlugin, { mode: 'view' }])\n\t\t\t\t.add([\n\t\t\t\t\tmediaPlugin,\n\t\t\t\t\t{\n\t\t\t\t\t\tallowMediaSingle: { disableLayout: false },\n\t\t\t\t\t\tallowMediaGroup: true,\n\t\t\t\t\t\tallowResizing: true,\n\t\t\t\t\t\tisCopyPasteEnabled: true,\n\t\t\t\t\t\tallowBreakoutSnapPoints: true,\n\t\t\t\t\t\tallowAdvancedToolBarOptions: true,\n\t\t\t\t\t\tallowDropzoneDropLine: true,\n\t\t\t\t\t\tallowMediaSingleEditable: true,\n\t\t\t\t\t\tallowImagePreview: true,\n\t\t\t\t\t\tfullWidthEnabled: true,\n\t\t\t\t\t\twaitForMediaUpload: true,\n\t\t\t\t\t\tallowCaptions: true,\n\t\t\t\t\t},\n\t\t\t\t])\n\t\t\t\t.add(captionPlugin)\n\t\t\t\t.add([\n\t\t\t\t\tannotationPlugin,\n\t\t\t\t\t{\n\t\t\t\t\t\tinlineComment: {},\n\t\t\t\t\t} as AnnotationProviders,\n\t\t\t\t])\n\t\t\t\t.add(extensionPlugin)\n\t\t\t\t.add([\n\t\t\t\t\tshowDiffPlugin,\n\t\t\t\t\t{\n\t\t\t\t\t\tsteps: [step1],\n\t\t\t\t\t\tcolorScheme: colorScheme,\n\t\t\t\t\t\toriginalDoc: {\n\t\t\t\t\t\t\ttype: 'doc',\n\t\t\t\t\t\t\tversion: 1,\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tcontent: [{ type: 'text', text: 'uiod' }],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t]),\n\t\t[colorScheme],\n\t);\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tsetColorScheme(colorScheme === 'traditional' ? 'standard' : 'traditional');\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tColour scheme: {colorScheme}\n\t\t\t</Button>\n\t\t\t<ComposableEditor\n\t\t\t\tappearance=\"full-page\"\n\t\t\t\tonChange={(view) => {\n\t\t\t\t\tapplyDevTools(view);\n\t\t\t\t}}\n\t\t\t\tpreset={preset}\n\t\t\t\tdefaultValue={{\n\t\t\t\t\ttype: 'doc',\n\t\t\t\t\tversion: 1,\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\ttext: 'abc',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t}}\n\t\t\t/>\n\t\t</>\n\t);\n}"],
|
|
528
|
+
props: [{
|
|
529
|
+
name: 'api',
|
|
530
|
+
type: '{ showDiff: BasePluginDependenciesAPI<{ commands: { hideDiff: EditorCommand; scrollToNext: EditorCommand; scrollToPrevious: EditorCommand; showDiff: (config: PMDiffParams) => EditorCommand; }; dependencies: [...]; pluginConfiguration: DiffParams; sharedState: { ...; }; }>; } & RequiredPluginDependenciesAPI<...> & Op...'
|
|
531
|
+
}, {
|
|
532
|
+
name: 'config',
|
|
533
|
+
type: '{ colorScheme?: ColorScheme; originalDoc: JSONDocNode; steps: StepJson[]; }',
|
|
534
|
+
isRequired: true
|
|
535
|
+
}]
|
|
536
|
+
}, {
|
|
537
|
+
name: 'Editor Plugin Tasks And Decisions',
|
|
538
|
+
package: '@atlaskit/editor-plugin-tasks-and-decisions',
|
|
539
|
+
description: 'Tasks and decisions plugin for @atlaskit/editor-core',
|
|
540
|
+
status: 'general-availability',
|
|
541
|
+
usageGuidelines: [],
|
|
542
|
+
contentGuidelines: [],
|
|
543
|
+
accessibilityGuidelines: [],
|
|
544
|
+
keywords: ['editor', 'editor-plugin-tasks-and-decisions', 'atlaskit'],
|
|
545
|
+
category: 'editor',
|
|
546
|
+
examples: ["import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { tasksAndDecisionsPlugin } from '@atlaskit/editor-plugins/tasks-and-decisions';\nexport default function Editor(): React.JSX.Element {\n\tconst { preset } = usePreset((builder) =>\n\t\tbuilder\n\t\t\t.add(basePlugin)\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add(quickInsertPlugin)\n\t\t\t.add(tasksAndDecisionsPlugin),\n\t);\n\treturn <ComposableEditor appearance=\"full-page\" preset={preset} />;\n}"],
|
|
547
|
+
props: [{
|
|
548
|
+
name: 'api',
|
|
549
|
+
type: '{ taskDecision: BasePluginDependenciesAPI<{ actions: { indentTaskList: (inputMethod?: IndentationInputMethod) => Command; insertTaskDecision: (listType: TaskDecisionListType, inputMethod?: INPUT_METHOD.FORMATTING | ... 2 more ... | TOOLBAR_MENU_TYPE, addItem?: AddItemTransactionCreator, listLocalId?: string, itemLoc...'
|
|
550
|
+
}, {
|
|
551
|
+
name: 'config',
|
|
552
|
+
type: 'TasksAndDecisionsPluginOptions',
|
|
553
|
+
isRequired: true
|
|
554
|
+
}]
|
|
555
|
+
}, {
|
|
556
|
+
name: 'Editor Plugin Text Color',
|
|
557
|
+
package: '@atlaskit/editor-plugin-text-color',
|
|
558
|
+
description: 'Text color plugin for @atlaskit/editor-core',
|
|
559
|
+
status: 'general-availability',
|
|
560
|
+
usageGuidelines: [],
|
|
561
|
+
contentGuidelines: [],
|
|
562
|
+
accessibilityGuidelines: [],
|
|
563
|
+
keywords: ['editor', 'editor-plugin-text-color', 'atlaskit'],
|
|
564
|
+
category: 'editor',
|
|
565
|
+
examples: ["import { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { primaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { historyPlugin } from '@atlaskit/editor-plugins/history';\nimport { textColorPlugin } from '@atlaskit/editor-plugins/text-color';\nimport { textFormattingPlugin } from '@atlaskit/editor-plugins/text-formatting';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugins/type-ahead';\nimport { undoRedoPlugin } from '@atlaskit/editor-plugins/undo-redo';\nconst Editor = (): React.JSX.Element => {\n\tconst { preset } = usePreset((builder) =>\n\t\tbuilder\n\t\t\t.add(basePlugin)\n\t\t\t.add(historyPlugin)\n\t\t\t.add([analyticsPlugin, {}])\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add(primaryToolbarPlugin)\n\t\t\t.add(undoRedoPlugin)\n\t\t\t.add(textFormattingPlugin)\n\t\t\t.add(textColorPlugin),\n\t);\n\treturn <ComposableEditor appearance=\"full-page\" preset={preset} />;\n};\nexport default Editor;"],
|
|
566
|
+
props: [{
|
|
567
|
+
name: 'api',
|
|
568
|
+
type: '{ textColor: BasePluginDependenciesAPI<{ actions: { changeColor: (color: string, inputMethod?: TextColorInputMethod) => Command; }; commands: { changeColor: (color: string, inputMethod?: TextColorInputMethod) => EditorCommand; setPalette: (isPaletteOpen: boolean) => EditorCommand; }; dependencies: Dependencies; plug...'
|
|
569
|
+
}, {
|
|
570
|
+
name: 'config',
|
|
571
|
+
type: 'boolean | TextColorPluginConfig',
|
|
572
|
+
isRequired: true
|
|
573
|
+
}]
|
|
574
|
+
}, {
|
|
575
|
+
name: 'Editor Plugin Track Changes',
|
|
576
|
+
package: '@atlaskit/editor-plugin-track-changes',
|
|
577
|
+
description: 'ShowDiff plugin for @atlaskit/editor-core',
|
|
578
|
+
status: 'general-availability',
|
|
579
|
+
usageGuidelines: [],
|
|
580
|
+
contentGuidelines: [],
|
|
581
|
+
accessibilityGuidelines: [],
|
|
582
|
+
keywords: ['editor', 'editor-plugin-track-changes', 'atlaskit'],
|
|
583
|
+
category: 'editor',
|
|
584
|
+
examples: ["import { IntlProvider } from 'react-intl';\nimport Button from '@atlaskit/button/new';\nimport { cssMap } from '@atlaskit/css';\nimport { EditorPresetBuilder } from '@atlaskit/editor-common/preset';\nimport { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';\nimport { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';\nimport { blockTypePlugin } from '@atlaskit/editor-plugin-block-type';\nimport { codeBlockPlugin } from '@atlaskit/editor-plugin-code-block';\nimport { compositionPlugin } from '@atlaskit/editor-plugin-composition';\nimport { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';\nimport { copyButtonPlugin } from '@atlaskit/editor-plugin-copy-button';\nimport { datePlugin } from '@atlaskit/editor-plugin-date';\nimport { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';\nimport { editorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';\nimport { emojiPlugin } from '@atlaskit/editor-plugin-emoji';\nimport { expandPlugin } from '@atlaskit/editor-plugin-expand';\nimport { extensionPlugin } from '@atlaskit/editor-plugin-extension';\nimport { floatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';\nimport { focusPlugin } from '@atlaskit/editor-plugin-focus';\nimport { gridPlugin } from '@atlaskit/editor-plugin-grid';\nimport { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';\nimport { historyPlugin } from '@atlaskit/editor-plugin-history';\nimport { hyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';\nimport { imageUploadPlugin } from '@atlaskit/editor-plugin-image-upload';\nimport { insertBlockPlugin } from '@atlaskit/editor-plugin-insert-block';\nimport { layoutPlugin } from '@atlaskit/editor-plugin-layout';\nimport { listPlugin } from '@atlaskit/editor-plugin-list';\nimport { mediaPlugin } from '@atlaskit/editor-plugin-media';\nimport { mentionsPlugin } from '@atlaskit/editor-plugin-mentions';\nimport { panelPlugin } from '@atlaskit/editor-plugin-panel';\nimport { placeholderTextPlugin } from '@atlaskit/editor-plugin-placeholder-text';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugin-quick-insert';\nimport { rulePlugin } from '@atlaskit/editor-plugin-rule';\nimport { selectionPlugin } from '@atlaskit/editor-plugin-selection';\nimport { showDiffPlugin } from '@atlaskit/editor-plugin-show-diff';\nimport { statusPlugin } from '@atlaskit/editor-plugin-status';\nimport { tablesPlugin } from '@atlaskit/editor-plugin-table';\nimport { tasksAndDecisionsPlugin } from '@atlaskit/editor-plugin-tasks-and-decisions';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';\nimport { widthPlugin } from '@atlaskit/editor-plugin-width';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { textFormattingPlugin } from '@atlaskit/editor-plugins/text-formatting';\nimport { Box } from '@atlaskit/primitives/compiled';\nimport { token } from '@atlaskit/tokens';\nimport { getEmojiResource } from '@atlaskit/util-data-test/get-emoji-resource';\nimport { trackChangesPlugin } from '../src/trackChangesPlugin';\nconst styles = cssMap({\n\taboveEditor: {\n\t\tposition: 'fixed',\n\t\tbottom: 0,\n\t\tzIndex: 800,\n\t\tpaddingTop: token('space.100'),\n\t\tpaddingBottom: token('space.100'),\n\t},\n\teverythingContainer: {\n\t\tpaddingTop: token('space.200'),\n\t\tpaddingBottom: token('space.200'),\n\t\tpaddingLeft: token('space.200'),\n\t\tpaddingRight: token('space.200'),\n\t},\n});\nconst createPreset = () =>\n\tnew EditorPresetBuilder()\n\t\t.add(basePlugin)\n\t\t.add(typeAheadPlugin)\n\t\t.add(widthPlugin)\n\t\t.add(compositionPlugin)\n\t\t.add([analyticsPlugin, {}])\n\t\t.add(editorDisabledPlugin)\n\t\t.add(contentInsertionPlugin)\n\t\t.add(guidelinePlugin)\n\t\t.add(selectionPlugin)\n\t\t.add(decorationsPlugin)\n\t\t.add(hyperlinkPlugin)\n\t\t.add(datePlugin)\n\t\t.add(listPlugin)\n\t\t.add(blockTypePlugin)\n\t\t.add(imageUploadPlugin)\n\t\t.add([emojiPlugin, { emojiProvider: getEmojiResource() }])\n\t\t.add(quickInsertPlugin)\n\t\t.add(rulePlugin)\n\t\t.add(codeBlockPlugin)\n\t\t.add(panelPlugin)\n\t\t.add(focusPlugin)\n\t\t.add(gridPlugin)\n\t\t.add(copyButtonPlugin)\n\t\t.add(floatingToolbarPlugin)\n\t\t.add(mediaPlugin)\n\t\t.add(statusPlugin)\n\t\t.add(mentionsPlugin)\n\t\t.add(layoutPlugin)\n\t\t.add(expandPlugin)\n\t\t.add([placeholderTextPlugin, {}])\n\t\t.add(extensionPlugin)\n\t\t.add(tasksAndDecisionsPlugin)\n\t\t.add(textFormattingPlugin)\n\t\t.add([tablesPlugin, { tableOptions: { advanced: true } }])\n\t\t.add([\n\t\t\tinsertBlockPlugin,\n\t\t\t{\n\t\t\t\tallowExpand: true,\n\t\t\t\thorizontalRuleEnabled: true,\n\t\t\t\tnativeStatusSupported: true,\n\t\t\t},\n\t\t])\n\t\t.add(historyPlugin)\n\t\t.add(showDiffPlugin)\n\t\t.add(trackChangesPlugin);\nfunction Editor(): React.JSX.Element {\n\tconst { preset, editorApi } = usePreset(createPreset);\n\tconst isSelected = useSharedPluginStateSelector(editorApi, 'trackChanges.isDisplayingChanges');\n\tconst activeIndex = useSharedPluginStateSelector(editorApi, 'showDiff.activeIndex');\n\tconst isShowDiffAvailable = useSharedPluginStateSelector(\n\t\teditorApi,\n\t\t'trackChanges.isShowDiffAvailable',\n\t);\n\treturn (\n\t\t<IntlProvider locale=\"en\">\n\t\t\t<Box xcss={styles.everythingContainer}>\n\t\t\t\t<Box xcss={styles.aboveEditor}>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tappearance=\"primary\"\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\teditorApi?.core.actions.execute(editorApi?.trackChanges.commands.toggleChanges);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisSelected={isSelected}\n\t\t\t\t\t\tisDisabled={!(isShowDiffAvailable ?? false)}\n\t\t\t\t\t>\n\t\t\t\t\t\tShow Diff\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tappearance=\"primary\"\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\teditorApi?.core.actions.execute(editorApi?.showDiff.commands.scrollToNext);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tNext\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tappearance=\"primary\"\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\teditorApi?.core.actions.execute(editorApi?.showDiff.commands.scrollToPrevious);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tPrevious\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button>{activeIndex}</Button>\n\t\t\t\t</Box>\n\t\t\t\t<ComposableEditor preset={preset} appearance=\"comment\" />\n\t\t\t</Box>\n\t\t</IntlProvider>\n\t);\n}\nexport default Editor;"],
|
|
585
|
+
props: [{
|
|
586
|
+
name: 'api',
|
|
587
|
+
type: '{ trackChanges: BasePluginDependenciesAPI<{ commands: { resetBaseline: EditorCommand; toggleChanges: EditorCommand; }; dependencies: [OptionalPlugin<NextEditorPluginFunctionOptionalConfigDefinition<"primaryToolbar", { actions: { registerComponent: ({ name, component, }: { ...; }) => void; }; pluginConfiguration?: Pr...'
|
|
588
|
+
}, {
|
|
589
|
+
name: 'config',
|
|
590
|
+
type: 'TrackChangesPluginOptions',
|
|
591
|
+
isRequired: true
|
|
592
|
+
}]
|
|
593
|
+
}, {
|
|
594
|
+
name: 'Editor Plugin User Preferences',
|
|
595
|
+
package: '@atlaskit/editor-plugin-user-preferences',
|
|
596
|
+
description: 'UserPreferences plugin for @atlaskit/editor-core',
|
|
597
|
+
status: 'general-availability',
|
|
598
|
+
usageGuidelines: [],
|
|
599
|
+
contentGuidelines: [],
|
|
600
|
+
accessibilityGuidelines: [],
|
|
601
|
+
keywords: ['editor', 'editor-plugin-user-preferences', 'atlaskit'],
|
|
602
|
+
category: 'editor',
|
|
603
|
+
examples: ["import applyDevTools from 'prosemirror-dev-tools';\nimport { ComposableEditor } from '@atlaskit/editor-core/composable-editor';\nimport { usePreset } from '@atlaskit/editor-core/use-preset';\nimport { analyticsPlugin } from '@atlaskit/editor-plugins/analytics';\nimport { annotationPlugin } from '@atlaskit/editor-plugins/annotation';\nimport type { AnnotationProviders } from '@atlaskit/editor-plugins/annotation';\nimport { basePlugin } from '@atlaskit/editor-plugins/base';\nimport { blockControlsPlugin } from '@atlaskit/editor-plugins/block-controls';\nimport { blockTypePlugin } from '@atlaskit/editor-plugins/block-type';\nimport { breakoutPlugin } from '@atlaskit/editor-plugins/breakout';\nimport { codeBlockPlugin } from '@atlaskit/editor-plugins/code-block';\nimport { compositionPlugin } from '@atlaskit/editor-plugins/composition';\nimport { contentInsertionPlugin } from '@atlaskit/editor-plugins/content-insertion';\nimport { copyButtonPlugin } from '@atlaskit/editor-plugins/copy-button';\nimport { decorationsPlugin } from '@atlaskit/editor-plugins/decorations';\nimport { editorDisabledPlugin } from '@atlaskit/editor-plugins/editor-disabled';\nimport { emojiPlugin } from '@atlaskit/editor-plugins/emoji';\nimport { expandPlugin } from '@atlaskit/editor-plugins/expand';\nimport { extensionPlugin } from '@atlaskit/editor-plugins/extension';\nimport { floatingToolbarPlugin } from '@atlaskit/editor-plugins/floating-toolbar';\nimport { focusPlugin } from '@atlaskit/editor-plugins/focus';\nimport { gridPlugin } from '@atlaskit/editor-plugins/grid';\nimport { guidelinePlugin } from '@atlaskit/editor-plugins/guideline';\nimport { layoutPlugin } from '@atlaskit/editor-plugins/layout';\nimport { listPlugin } from '@atlaskit/editor-plugins/list';\nimport { mediaPlugin } from '@atlaskit/editor-plugins/media';\nimport { panelPlugin } from '@atlaskit/editor-plugins/panel';\nimport { quickInsertPlugin } from '@atlaskit/editor-plugins/quick-insert';\nimport { rulePlugin } from '@atlaskit/editor-plugins/rule';\nimport { selectionPlugin } from '@atlaskit/editor-plugins/selection';\nimport { selectionToolbarPlugin } from '@atlaskit/editor-plugins/selection-toolbar';\nimport { tablesPlugin } from '@atlaskit/editor-plugins/table';\nimport { tasksAndDecisionsPlugin } from '@atlaskit/editor-plugins/tasks-and-decisions';\nimport { textFormattingPlugin } from '@atlaskit/editor-plugins/text-formatting';\nimport { typeAheadPlugin } from '@atlaskit/editor-plugins/type-ahead';\nimport { widthPlugin } from '@atlaskit/editor-plugins/width';\nimport { getUserPreferencesProvider } from '@atlaskit/editor-test-helpers/mock-user-preference-provider';\nimport { userPreferencesPlugin } from '../src';\n/**\n * This is an example Editor class\n * @example return <Editor />\n */\nexport default function Editor(): React.JSX.Element {\n\tconst { preset } = usePreset((builder) =>\n\t\tbuilder\n\t\t\t.add(basePlugin)\n\t\t\t.add(blockTypePlugin)\n\t\t\t.add([userPreferencesPlugin, { userPreferencesProvider: getUserPreferencesProvider() }])\n\t\t\t.add(focusPlugin)\n\t\t\t.add(typeAheadPlugin)\n\t\t\t.add(quickInsertPlugin)\n\t\t\t.add(selectionPlugin)\n\t\t\t.add(decorationsPlugin)\n\t\t\t.add(layoutPlugin)\n\t\t\t.add(listPlugin)\n\t\t\t.add([analyticsPlugin, {}])\n\t\t\t.add(contentInsertionPlugin)\n\t\t\t.add(widthPlugin)\n\t\t\t.add(guidelinePlugin)\n\t\t\t.add(textFormattingPlugin)\n\t\t\t.add([\n\t\t\t\ttablesPlugin,\n\t\t\t\t{\n\t\t\t\t\ttableOptions: {\n\t\t\t\t\t\tadvanced: true,\n\t\t\t\t\t\tallowColumnResizing: true,\n\t\t\t\t\t\tallowHeaderRow: true,\n\t\t\t\t\t\tallowTableResizing: true,\n\t\t\t\t\t},\n\t\t\t\t\tisTableScalingEnabled: true,\n\t\t\t\t\tallowContextualMenu: true,\n\t\t\t\t\tfullWidthEnabled: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add(emojiPlugin)\n\t\t\t.add(panelPlugin)\n\t\t\t.add(rulePlugin)\n\t\t\t.add(tasksAndDecisionsPlugin)\n\t\t\t.add([expandPlugin, { allowInsertion: true, appearance: 'full-page' }])\n\t\t\t.add(editorDisabledPlugin)\n\t\t\t.add(copyButtonPlugin)\n\t\t\t.add(compositionPlugin)\n\t\t\t.add(codeBlockPlugin)\n\t\t\t.add(blockControlsPlugin)\n\t\t\t.add(breakoutPlugin)\n\t\t\t.add(gridPlugin)\n\t\t\t.add(floatingToolbarPlugin)\n\t\t\t.add([\n\t\t\t\tselectionToolbarPlugin,\n\t\t\t\t{\n\t\t\t\t\tpreferenceToolbarAboveSelection: true,\n\t\t\t\t\tcontextualFormattingEnabled: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add([\n\t\t\t\tmediaPlugin,\n\t\t\t\t{\n\t\t\t\t\tallowMediaSingle: { disableLayout: true },\n\t\t\t\t\tallowMediaGroup: false,\n\t\t\t\t\tallowResizing: true,\n\t\t\t\t\tisCopyPasteEnabled: true,\n\t\t\t\t\tallowBreakoutSnapPoints: true,\n\t\t\t\t\tallowAdvancedToolBarOptions: true,\n\t\t\t\t\tallowDropzoneDropLine: true,\n\t\t\t\t\tallowMediaSingleEditable: true,\n\t\t\t\t\tallowImagePreview: true,\n\t\t\t\t\tfullWidthEnabled: true,\n\t\t\t\t\twaitForMediaUpload: true,\n\t\t\t\t},\n\t\t\t])\n\t\t\t.add([\n\t\t\t\tannotationPlugin,\n\t\t\t\t{\n\t\t\t\t\tinlineComment: {},\n\t\t\t\t} as AnnotationProviders,\n\t\t\t])\n\t\t\t.add(extensionPlugin),\n\t);\n\treturn (\n\t\t<ComposableEditor\n\t\t\tappearance=\"full-page\"\n\t\t\tonChange={(view) => {\n\t\t\t\tapplyDevTools(view);\n\t\t\t}}\n\t\t\tpreset={preset}\n\t\t/>\n\t);\n}"],
|
|
604
|
+
props: [{
|
|
605
|
+
name: 'api',
|
|
606
|
+
type: '{ userPreferences: BasePluginDependenciesAPI<{ actions: { getUserPreferences: () => ResolvedUserPreferences; updateUserPreference: (key: "toolbarDockingPosition", value: "top" | "none") => EditorCommand; }; dependencies: [...]; pluginConfiguration: UserPreferencesPluginOptions; sharedState: UserPreferencesSharedStat...'
|
|
607
|
+
}, {
|
|
608
|
+
name: 'config',
|
|
609
|
+
type: '{ initialUserPreferences?: ResolvedUserPreferences; userPreferencesProvider?: UserPreferencesProvider; }',
|
|
610
|
+
isRequired: true
|
|
611
|
+
}]
|
|
612
|
+
}, {
|
|
613
|
+
name: 'Editor Ssr Renderer',
|
|
614
|
+
package: '@atlaskit/editor-ssr-renderer',
|
|
615
|
+
description: 'SSR Renderer based on Editor',
|
|
616
|
+
status: 'general-availability',
|
|
617
|
+
usageGuidelines: [],
|
|
618
|
+
contentGuidelines: [],
|
|
619
|
+
accessibilityGuidelines: [],
|
|
620
|
+
keywords: ['editor', 'editor-ssr-renderer', 'atlaskit'],
|
|
621
|
+
category: 'editor',
|
|
622
|
+
examples: ["import type { JSX } from 'react';\nimport { createExample } from '../example-helpers/createExample';\nconst AllNodesExample: () => JSX.Element = createExample({\n\tversion: 1,\n\ttype: 'doc',\n\tcontent: [\n\t\t{\n\t\t\ttype: 'heading',\n\t\t\tattrs: {\n\t\t\t\tlevel: 1,\n\t\t\t\tlocalId: 'b4f3e2e3-5f4a-4f6d-8f4e-1c2e5d6a7b8c',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Hydrate ADF Example',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'taskList',\n\t\t\tattrs: {\n\t\t\t\tlocalId: '71f8c24d-4b69-48c4-9fa9-be30a8050158',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'taskItem',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tlocalId: '8a0fe9b4-f087-4079-90be-230c89902a30',\n\t\t\t\t\t\tstate: 'TODO',\n\t\t\t\t\t},\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\ttext: 'items 1',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'taskItem',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tlocalId: 'dfbd3b3f-915e-45cc-8fdb-4dcf57a3bcbe',\n\t\t\t\t\t\tstate: 'TODO',\n\t\t\t\t\t},\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\ttext: 'item 2',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'taskItem',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tlocalId: '543abf63-1883-4bbc-8a15-3dfeed52325d',\n\t\t\t\t\t\tstate: 'TODO',\n\t\t\t\t\t},\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'date',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\ttimestamp: '1650499200000',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\ttext: ' ',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'bulletList',\n\t\t\tattrs: {\n\t\t\t\tlocalId: '12c103f9-b76d-4f1e-b961-a3936b2702de',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'listItem',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tlocalId: 'b1b3abf6-1db5-4a9a-bfaa-b6764c9f9112',\n\t\t\t\t\t},\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: '151acfae-ae82-4ef9-beeb-f88ec1c9894b',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\ttext: 'Hello ',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'date',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\ttimestamp: '1757635200000',\n\t\t\t\t\t\t\t\t\t\tlocalId: '55acf137-5d94-45d9-90b4-b723fa28c985',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'listItem',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tlocalId: 'b1b3abf6-1db5-4a9a-bfaa-b6764c9f9112',\n\t\t\t\t\t},\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: '50501685-2dc4-4392-91bd-b128efcf9895',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'mention',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tid: '0',\n\t\t\t\t\t\t\t\t\t\tlocalId: '46c3bfd5-beea-4b0c-995c-046c1acc9d30',\n\t\t\t\t\t\t\t\t\t\ttext: '',\n\t\t\t\t\t\t\t\t\t\taccessLevel: '',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\ttext: ' ',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'blockCard',\n\t\t\tattrs: {\n\t\t\t\tlocalId: 'c7f5005a-fea1-45ea-8f8d-c5b343c97b9e',\n\t\t\t\turl: 'https://google.com',\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tattrs: {\n\t\t\t\tlocalId: '9fc1c384-5431-429e-80f8-c874e24f6533',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Elit duis quis minim. Et incididunt quis elit dolor cupidatat occaecat sunt ut quis aute. Enim esse non proident adipisicing et. Sit deserunt deserunt veniam commodo cupidatat labore tempor et non. Elit tempor ut voluptate et. Qui nostrud consectetur magna velit elit aliquip laboris magna ex qui sunt id. Ad Lorem ex ipsum officia incididunt aliqua fugiat enim elit in incididunt irure proident id nostrud. Incididunt fugiat proident pariatur dolor cupidatat sit. ',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'emoji',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tshortName: ':trident:',\n\t\t\t\t\t\tid: '1f531',\n\t\t\t\t\t\ttext: '🔱',\n\t\t\t\t\t\tlocalId: 'fdb75b26-aae0-4be8-9b2b-a4e778e0a2cd',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: ' ',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'table',\n\t\t\tattrs: {\n\t\t\t\tisNumberColumnEnabled: false,\n\t\t\t\tlayout: 'default',\n\t\t\t\tlocalId: 'd7a03990-a862-4bfd-ad17-b2e9f6a4ff2e',\n\t\t\t\twidth: 760,\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'tableRow',\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableHeader',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: '1e6b8676-4f0e-426b-a9a4-423d72123d24',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tlocalId: '6b4e9510-f922-4ba7-bf81-f33465b7d367',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Col 1',\n\t\t\t\t\t\t\t\t\t\t\tmarks: [\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'strong',\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableHeader',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: 'e10f2258-1d22-4f6d-b98a-b3880a1747e8',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tlocalId: '3dc0dc33-e9ca-4638-ad47-338ca67895ae',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Col 2',\n\t\t\t\t\t\t\t\t\t\t\tmarks: [\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'strong',\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableHeader',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: 'aa660cd1-e1d7-48e1-96cc-65e505c17cd5',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tlocalId: 'a77ae3e3-240a-4a7a-a945-bd8b28adedbd',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Col 3',\n\t\t\t\t\t\t\t\t\t\t\tmarks: [\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'strong',\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'tableRow',\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: '8f95d973-3224-48e9-988f-ad4505177f66',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tlocalId: 'c2f4f7ff-f648-4a9a-839a-8453565fdd34',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\ttext: '1',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: 'a131fc8c-a5a7-45e1-8097-f6a9187e3b08',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tlocalId: '03c17a33-b317-443d-ae7b-ae3198a5a396',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\ttext: '3',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: 'c3e4e6cb-ec68-4789-a172-f79e06fdec4a',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tlocalId: '233cbe23-3a97-4fb2-adf6-a38ca8916b3a',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\ttext: '3',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'tableRow',\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: 'e0530369-06f8-4984-932d-2fb257bf9d8b',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tlocalId: '108448ca-1b20-449e-bcb6-1919cf5b7153',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\ttext: '4',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: 'ffebed1c-357e-4432-be6b-3b7f79efc562',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tlocalId: '54c11e58-63b2-4dc6-823a-96819e45293a',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\ttext: '5',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'tableCell',\n\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\tlocalId: '7f1ab7c1-f241-4788-a6c6-eddfb91a0fb3',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t\t\t\tlocalId: '5ba7b61d-49e7-464a-a468-b57fb628815a',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\tcontent: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\t\t\t\t\ttext: '6',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tattrs: {\n\t\t\t\tlocalId: 'e89b40f3-a58d-4b41-a4f3-38ff275aaeee',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Exercitation culpa dolore laboris est esse excepteur nisi cupidatat. Consectetur culpa occaecat qui proident laboris veniam do ex incididunt labore ut enim. Pariatur mollit sit eu laboris laboris reprehenderit anim labore dolore nostrud qui id quis eu et. Esse deserunt laborum laborum ut. Officia adipisicing qui proident commodo ex. Nulla cillum ea minim officia cillum voluptate sint consectetur culpa nostrud eu aliquip pariatur dolore nulla.',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'mediaSingle',\n\t\t\tattrs: {\n\t\t\t\tlayout: 'center',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'media',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\ttype: 'file',\n\t\t\t\t\t\tlocalId: 'ded80750-25e1-4ecd-9aaa-65074b845afb',\n\t\t\t\t\t\tid: 'a47d3e72-58e9-43fa-b8bc-29613d2a17ff',\n\t\t\t\t\t\talt: 'GiBxSz9bcAAJ0qF.jpeg',\n\t\t\t\t\t\tcollection: 'MediaServicesSample',\n\t\t\t\t\t\theight: 2059,\n\t\t\t\t\t\twidth: 1536,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tattrs: {\n\t\t\t\tlocalId: 'f9c037cf-0e43-410a-a486-b8853b02c5c1',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Sunt magna sit labore ea. Nulla aliquip dolor occaecat minim ex amet in officia exercitation. Occaecat enim ea Lorem amet laboris laboris aute dolor cillum sit excepteur ipsum. Ad dolore et ipsum non. Sint adipisicing consequat ea aliqua exercitation aliquip quis commodo adipisicing. Excepteur tempor excepteur ea nostrud exercitation laborum incididunt duis reprehenderit pariatur culpa proident.',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'expand',\n\t\t\tattrs: {\n\t\t\t\ttitle: '',\n\t\t\t\tlocalId: '68b6b5f5-4979-41fa-aa00-e07ff7653f60',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'paragraph',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tlocalId: '0c39b970-4eb6-4c7f-ad64-dc7eeb37260d',\n\t\t\t\t\t},\n\t\t\t\t\tcontent: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'text',\n\t\t\t\t\t\t\ttext: 'Sunt magna sit labore ea. Nulla aliquip dolor occaecat minim ex amet in officia exercitation. Occaecat enim ea Lorem amet laboris laboris aute dolor cillum sit excepteur ipsum. Ad dolore et ipsum non. Sint adipisicing consequat ea aliqua exercitation aliquip quis commodo adipisicing. Excepteur tempor excepteur ea nostrud exercitation laborum incididunt duis reprehenderit pariatur culpa proident.',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t\tmarks: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'breakout',\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tmode: 'wide',\n\t\t\t\t\t\twidth: null,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'codeBlock',\n\t\t\tattrs: {\n\t\t\t\tlanguage: 'typescript',\n\t\t\t\tlocalId: 'bc950717-bb4f-4edb-9895-9025f8708ce6',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'var a = 1;',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'embedCard',\n\t\t\tattrs: {\n\t\t\t\turl: 'https://www.loom.com/share/f884ee7e062843a3bb7acb8ad6cd9234',\n\t\t\t\tlayout: 'align-end',\n\t\t\t},\n\t\t},\n\t],\n});\nexport default AllNodesExample;", "import type { JSX } from 'react';\nimport { createExample } from '../example-helpers/createExample';\nconst CodeBlocksExample: () => JSX.Element = createExample({\n\tversion: 1,\n\ttype: 'doc',\n\tcontent: [\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'This is an example document with text and code blocks.',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'codeBlock',\n\t\t\tattrs: {\n\t\t\t\tlanguage: 'javascript',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: \"const greeting = 'Hello, World!';\\nconsole.log(greeting);\",\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Here is another example with Python code:',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'codeBlock',\n\t\t\tattrs: {\n\t\t\t\tlanguage: 'python',\n\t\t\t},\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: \"def hello():\\n print('Hello, World!')\\n\\nhello()\",\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'And a final paragraph of text.',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t],\n});\nexport default CodeBlocksExample;", "import type { JSX } from 'react';\nimport { createExample } from '../example-helpers/createExample';\nconst TextExample: () => JSX.Element = createExample({\n\tversion: 1,\n\ttype: 'doc',\n\tcontent: [\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'This is the first paragraph with ',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'bold text',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'strong',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: '.',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'This is the second paragraph where ',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'some words',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'strong',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: ' are bolded.',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'This third paragraph contains only regular text.',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t\t{\n\t\t\ttype: 'paragraph',\n\t\t\tcontent: [\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'Here is a paragraph where ',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: 'most of the text',\n\t\t\t\t\tmarks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\ttype: 'strong',\n\t\t\t\t\t\t},\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttype: 'text',\n\t\t\t\t\ttext: ' is bolded.',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t],\n});\nexport default TextExample;"],
|
|
623
|
+
props: [{
|
|
624
|
+
name: 'aria-describedby',
|
|
625
|
+
type: 'string'
|
|
626
|
+
}, {
|
|
627
|
+
name: 'aria-label',
|
|
628
|
+
type: 'string',
|
|
629
|
+
isRequired: true
|
|
630
|
+
}, {
|
|
631
|
+
name: 'className',
|
|
632
|
+
type: 'string',
|
|
633
|
+
isRequired: true
|
|
634
|
+
}, {
|
|
635
|
+
name: 'data-editor-id',
|
|
636
|
+
type: 'string',
|
|
637
|
+
isRequired: true
|
|
638
|
+
}, {
|
|
639
|
+
name: 'doc',
|
|
640
|
+
type: 'PMNode',
|
|
641
|
+
isRequired: true
|
|
642
|
+
}, {
|
|
643
|
+
name: 'id',
|
|
644
|
+
type: 'string',
|
|
645
|
+
isRequired: true
|
|
646
|
+
}, {
|
|
647
|
+
name: 'intl',
|
|
648
|
+
type: 'IntlShape',
|
|
649
|
+
isRequired: true
|
|
650
|
+
}, {
|
|
651
|
+
name: 'onEditorStateChanged',
|
|
652
|
+
type: '(state: EditorState) => void'
|
|
653
|
+
}, {
|
|
654
|
+
name: 'onSSRMeasure',
|
|
655
|
+
type: '(measure: { endTimestamp: number; segmentName: string; startTimestamp: number; }) => void'
|
|
656
|
+
}, {
|
|
657
|
+
name: 'plugins',
|
|
658
|
+
type: 'EditorPlugin[]',
|
|
659
|
+
isRequired: true
|
|
660
|
+
}, {
|
|
661
|
+
name: 'portalProviderAPI',
|
|
662
|
+
type: 'PortalProviderAPI',
|
|
663
|
+
isRequired: true
|
|
664
|
+
}, {
|
|
665
|
+
name: 'schema',
|
|
666
|
+
type: 'Schema<any, any>',
|
|
667
|
+
isRequired: true
|
|
668
|
+
}]
|
|
669
|
+
}, {
|
|
670
|
+
name: 'Editor Core',
|
|
671
|
+
package: '@atlaskit/editor-extension-dropbox',
|
|
672
|
+
description: 'A an atlassian editor extension to add a native dropbox picker',
|
|
673
|
+
status: 'general-availability',
|
|
674
|
+
usageGuidelines: [],
|
|
675
|
+
contentGuidelines: [],
|
|
676
|
+
accessibilityGuidelines: [],
|
|
677
|
+
keywords: ['editor', 'extension-dropbox', 'atlaskit'],
|
|
678
|
+
category: 'editor',
|
|
679
|
+
examples: ["import React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport SectionMessage from '@atlaskit/section-message';\nimport Modal from '../src/modal';\nexport default (): React.JSX.Element => {\n\tconst [isOpen, setIsOpen] = useState(true);\n\treturn (\n\t\t<>\n\t\t\t<SectionMessage appearance=\"warning\">\n\t\t\t\tInternal component only - not consumable outside this package\n\t\t\t</SectionMessage>\n\t\t\t<Button onClick={() => setIsOpen(true)}>Show Modal</Button>\n\t\t\t<Modal\n\t\t\t\tshowModal={isOpen}\n\t\t\t\tonClose={() => setIsOpen(false)}\n\t\t\t\tTEST_ONLY_src=\"http://localhost:9000/examples.html?groupId=editor&packageId=extension-dropbox&exampleId=bad-example-modal-content\"\n\t\t\t/>\n\t\t</>\n\t);\n};"],
|
|
680
|
+
props: [{
|
|
681
|
+
name: 'appKey',
|
|
682
|
+
type: 'string',
|
|
683
|
+
isRequired: true
|
|
684
|
+
}, {
|
|
685
|
+
name: 'canMountinIframe',
|
|
686
|
+
type: 'boolean',
|
|
687
|
+
isRequired: true
|
|
688
|
+
}]
|
|
689
|
+
}, {
|
|
690
|
+
name: 'Renderer',
|
|
691
|
+
package: '@atlaskit/renderer',
|
|
692
|
+
description: 'Renderer component',
|
|
693
|
+
status: 'general-availability',
|
|
694
|
+
usageGuidelines: ['Use ReactRenderer with an ADF document; use a transformer (e.g. BitbucketTransformer) with ADFEncoder when your storage format is not ADF.', 'Avoid unnecessary props changes: extract static objects to constants, avoid passing new objects or anonymous functions on every render, use useMemo/useCallback for props and callbacks to prevent performance degradation.', 'Ensure only one version of Renderer sub-dependencies (adf-schema, editor-common, prosemirror-model, etc.) in your bundles; use deduplication or resolutions. Use correct peer dependency versions.', 'Use the truncated prop with maxHeight/fadeOutHeight when you need to cap rendered content with a fade; add polyfills for fetch and ES6/ES7 when targeting older browsers.'],
|
|
695
|
+
contentGuidelines: [],
|
|
696
|
+
accessibilityGuidelines: [],
|
|
697
|
+
keywords: ['editor', 'renderer', 'atlaskit'],
|
|
698
|
+
category: 'editor',
|
|
699
|
+
examples: ["import type { ChangeEvent } from 'react';\nimport RendererDemo from './helper/RendererDemo';\nimport { SmartCardProvider, CardClient } from '@atlaskit/link-provider';\nimport { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';\nimport type { ADFStage } from '@atlaskit/editor-common/validator';\nconst ADF_STAGE0 = 'stage0';\nconst ADF_FINAL = 'final';\nexport default function Example(): React.JSX.Element {\n\tconst [adfStage, setAdfStage] = React.useState<ADFStage>(ADF_FINAL);\n\tconst schema = getSchemaBasedOnStage(adfStage);\n\tconst onSchemaToggle = (event: ChangeEvent<HTMLInputElement>) => {\n\t\tsetAdfStage(event.currentTarget.checked ? ADF_STAGE0 : ADF_FINAL);\n\t};\n\tconst toggleCheckbox = (\n\t\t<label>\n\t\t\t{\n\t\t\t<input type=\"checkbox\" checked={adfStage === ADF_STAGE0} onChange={onSchemaToggle} />\n\t\t\tUse stage0 (experimental) document schema\n\t\t</label>\n\t);\n\treturn (\n\t\t<SmartCardProvider client={new CardClient('staging')}>\n\t\t\t<RendererDemo\n\t\t\t\tallowColumnSorting\n\t\t\t\tallowSelectAllTrap\n\t\t\t\tallowWrapCodeBlock\n\t\t\t\tallowCopyToClipboard\n\t\t\t\tserializer=\"react\"\n\t\t\t\tadfStage={adfStage}\n\t\t\t\tschema={schema}\n\t\t\t\tactionButtons={toggleCheckbox}\n\t\t\t\twithProviders\n\t\t\t/>\n\t\t</SmartCardProvider>\n\t);\n}", 'import RendererDemo from \'./helper/RendererDemo\';\nimport {\n\tNORMAL_SEVERITY_THRESHOLD,\n\tDEGRADED_SEVERITY_THRESHOLD,\n} from \'../../renderer/src/ui/Renderer\';\nexport default function Example(): React.JSX.Element {\n\treturn (\n\t\t<RendererDemo\n\t\t\tappearance="full-page"\n\t\t\tserializer="react"\n\t\t\tallowHeadingAnchorLinks\n\t\t\tallowColumnSorting={true}\n\t\t\tallowCopyToClipboard\n\t\t\tallowWrapCodeBlock\n\t\t\tUNSTABLE_allowTableAlignment\n\t\t\tUNSTABLE_allowTableResizing\n\t\t\tanalyticsEventSeverityTracking={{\n\t\t\t\tenabled: true,\n\t\t\t\tseverityNormalThreshold: NORMAL_SEVERITY_THRESHOLD,\n\t\t\t\tseverityDegradedThreshold: DEGRADED_SEVERITY_THRESHOLD,\n\t\t\t}}\n\t\t/>\n\t);\n}', 'import RendererDemo from \'./helper/RendererDemo\';\nexport default function Example(): React.JSX.Element {\n\treturn <RendererDemo withProviders={true} serializer="react" />;\n}'],
|
|
700
|
+
props: [{
|
|
701
|
+
name: 'addTelepointer',
|
|
702
|
+
type: 'boolean',
|
|
703
|
+
description: 'When enabled a trailing telepointer will be added to the rendered document\nfollowing content updates.\n\nContent is updated by passing a new value prop to the renderer.\n\nThe trailing pointer is updated by dom injection to the last text node which\nis updated as a result of a content update.'
|
|
704
|
+
}, {
|
|
705
|
+
name: 'adfStage',
|
|
706
|
+
type: '"final" | "stage0"'
|
|
707
|
+
}, {
|
|
708
|
+
name: 'allowAltTextOnImages',
|
|
709
|
+
type: 'boolean'
|
|
710
|
+
}, {
|
|
711
|
+
name: 'allowAnnotations',
|
|
712
|
+
type: 'boolean'
|
|
713
|
+
}, {
|
|
714
|
+
name: 'allowColumnSorting',
|
|
715
|
+
type: 'boolean'
|
|
716
|
+
}, {
|
|
717
|
+
name: 'allowCopyToClipboard',
|
|
718
|
+
type: 'boolean'
|
|
719
|
+
}, {
|
|
720
|
+
name: 'allowCustomPanels',
|
|
721
|
+
type: 'boolean'
|
|
722
|
+
}, {
|
|
723
|
+
name: 'allowFixedColumnWidthOption',
|
|
724
|
+
type: 'boolean'
|
|
725
|
+
}, {
|
|
726
|
+
name: 'allowHeadingAnchorLinks',
|
|
727
|
+
type: 'boolean | HeadingAnchorLinksConfig'
|
|
728
|
+
}, {
|
|
729
|
+
name: 'allowPlaceholderText',
|
|
730
|
+
type: 'boolean'
|
|
731
|
+
}, {
|
|
732
|
+
name: 'allowRendererContainerStyles',
|
|
733
|
+
type: 'boolean'
|
|
734
|
+
}, {
|
|
735
|
+
name: 'allowSelectAllTrap',
|
|
736
|
+
type: 'boolean'
|
|
737
|
+
}, {
|
|
738
|
+
name: 'allowUgcScrubber',
|
|
739
|
+
type: 'boolean'
|
|
740
|
+
}, {
|
|
741
|
+
name: 'allowWrapCodeBlock',
|
|
742
|
+
type: 'boolean'
|
|
743
|
+
}, {
|
|
744
|
+
name: 'analyticsEventSeverityTracking',
|
|
745
|
+
type: '{ enabled: boolean; severityDegradedThreshold: number; severityNormalThreshold: number; }'
|
|
746
|
+
}, {
|
|
747
|
+
name: 'annotationProvider',
|
|
748
|
+
type: '{ annotationManager?: AnnotationManager; inlineComment: InlineCommentAnnotationProvider; }'
|
|
749
|
+
}, {
|
|
750
|
+
name: 'appearance',
|
|
751
|
+
type: '"comment" | "full-page" | "full-width" | "max"'
|
|
752
|
+
}, {
|
|
753
|
+
name: 'createSerializer',
|
|
754
|
+
type: '(init: ReactSerializerInit) => Serializer<JSX.Element>',
|
|
755
|
+
description: 'Creates a new `Serializer` to transform the ADF `document` into `JSX.Element`.\nAllows Confluence to implement {@link https://hello.atlassian.net/wiki/spaces/~lmarinov/pages/5177285037/COMPLEXIT+Progressive+rendering+of+ADF progressive rendering}.'
|
|
756
|
+
}, {
|
|
757
|
+
name: 'dataProviders',
|
|
758
|
+
type: 'ProviderFactory'
|
|
759
|
+
}, {
|
|
760
|
+
name: 'disableActions',
|
|
761
|
+
type: 'boolean'
|
|
762
|
+
}, {
|
|
763
|
+
name: 'disableHeadingIDs',
|
|
764
|
+
type: 'boolean'
|
|
765
|
+
}, {
|
|
766
|
+
name: 'disableTableOverflowShadow',
|
|
767
|
+
type: 'boolean',
|
|
768
|
+
description: 'When true, disables the overflow shadow (visual indication) on the edges\nof tables.'
|
|
769
|
+
}, {
|
|
770
|
+
name: 'document',
|
|
771
|
+
type: 'DocNode',
|
|
772
|
+
isRequired: true
|
|
773
|
+
}, {
|
|
774
|
+
name: 'emojiResourceConfig',
|
|
775
|
+
type: 'EmojiResourceConfig'
|
|
776
|
+
}, {
|
|
777
|
+
name: 'enableSsrInlineScripts',
|
|
778
|
+
type: 'boolean'
|
|
779
|
+
}, {
|
|
780
|
+
name: 'eventHandlers',
|
|
781
|
+
type: 'EventHandlers'
|
|
782
|
+
}, {
|
|
783
|
+
name: 'extensionHandlers',
|
|
784
|
+
type: 'ExtensionHandlers<any>'
|
|
785
|
+
}, {
|
|
786
|
+
name: 'extensionViewportSizes',
|
|
787
|
+
type: 'ExtensionViewportSize[]'
|
|
788
|
+
}, {
|
|
789
|
+
name: 'fadeOutHeight',
|
|
790
|
+
type: 'number'
|
|
791
|
+
}, {
|
|
792
|
+
name: 'featureFlags',
|
|
793
|
+
type: '{ [featureFlag: string]: boolean; } | Partial<RawObjectFeatureFlags>',
|
|
794
|
+
description: "@description\nShort lived feature flags for experiments and gradual rollouts\nFlags are expected to follow these rules or they are filtered out\n\n1. cased in kebab-case (match [a-z-])\n2. have boolean values or object {} values\n\n@example\n```tsx\n(<Renderer featureFlags={{ 'my-feature': true }} />);\ngetFeatureFlags()?.myFeature === true;\n```\n\n@example\n```tsx\n(<Renderer featureFlags={{ 'my-feature': 'thing' }} />);\ngetFeatureFlags()?.myFeature === undefined;\n```\n\n@example\n```tsx\n(<Renderer featureFlags={{ 'product.my-feature': false }} />);\ngetFeatureFlags()?.myFeature === undefined;\ngetFeatureFlags()?.productMyFeature === undefined;\n```",
|
|
795
|
+
defaultValue: 'undefined'
|
|
796
|
+
}, {
|
|
797
|
+
name: 'getExtensionHeight',
|
|
798
|
+
type: '(node: PMNode) => string'
|
|
799
|
+
}, {
|
|
800
|
+
name: 'includeNodesCountInStats',
|
|
801
|
+
type: 'boolean'
|
|
802
|
+
}, {
|
|
803
|
+
name: 'innerRef',
|
|
804
|
+
type: 'React.RefObject<HTMLDivElement>'
|
|
805
|
+
}, {
|
|
806
|
+
name: 'isInsideOfInlineExtension',
|
|
807
|
+
type: 'boolean'
|
|
808
|
+
}, {
|
|
809
|
+
name: 'isTopLevelRenderer',
|
|
810
|
+
type: 'boolean'
|
|
811
|
+
}, {
|
|
812
|
+
name: 'maxHeight',
|
|
813
|
+
type: 'number'
|
|
814
|
+
}, {
|
|
815
|
+
name: 'media',
|
|
816
|
+
type: 'MediaOptions'
|
|
817
|
+
}, {
|
|
818
|
+
name: 'nodeComponents',
|
|
819
|
+
type: '{ [key: string]: React.ComponentType<any>; }'
|
|
820
|
+
}, {
|
|
821
|
+
name: 'noOpSSRInlineScript',
|
|
822
|
+
type: 'boolean'
|
|
823
|
+
}, {
|
|
824
|
+
name: 'onComplete',
|
|
825
|
+
type: '(stat: RenderOutputStat) => void'
|
|
826
|
+
}, {
|
|
827
|
+
name: 'onError',
|
|
828
|
+
type: '(error: any) => void'
|
|
829
|
+
}, {
|
|
830
|
+
name: 'onSetLinkTarget',
|
|
831
|
+
type: '(url: string) => "_blank"',
|
|
832
|
+
description: "Optional callback to programatically determine the link target for rendered links. Controls whether a link should render as external or not.\nReturn _blank if the url should render as an external link.\nReturn undefined to use the links default behavior and target.\n\n@param url - The URL of the link being rendered\n@returns '_blank' to render as an external link or undefined to not change the link"
|
|
833
|
+
}, {
|
|
834
|
+
name: 'portal',
|
|
835
|
+
type: 'HTMLElement'
|
|
836
|
+
}, {
|
|
837
|
+
name: 'rendererContext',
|
|
838
|
+
type: 'RendererContext'
|
|
839
|
+
}, {
|
|
840
|
+
name: 'schema',
|
|
841
|
+
type: 'Schema<any, any>'
|
|
842
|
+
}, {
|
|
843
|
+
name: 'scrollToBlock',
|
|
844
|
+
type: '(element: HTMLElement) => void',
|
|
845
|
+
description: 'Optional callback to scroll an element into view when using block links (#block-xxx).\nWhen provided, this is used instead of the default scrollIntoView for accurate positioning\nin product-specific scroll containers (e.g. Confluence view page).'
|
|
846
|
+
}, {
|
|
847
|
+
name: 'shouldDisplayExtensionAsInline',
|
|
848
|
+
type: '(extensionParams: ExtensionParams<Parameters>) => boolean',
|
|
849
|
+
description: 'Determines if the extension should be displayed as inline based on the extension parameters.\n@param extensionParams - The extension parameters.\n@returns True if the extension should be displayed as inline, false otherwise.'
|
|
850
|
+
}, {
|
|
851
|
+
name: 'shouldOpenMediaViewer',
|
|
852
|
+
type: 'boolean'
|
|
853
|
+
}, {
|
|
854
|
+
name: 'shouldRemoveEmptySpaceAroundContent',
|
|
855
|
+
type: 'boolean'
|
|
856
|
+
}, {
|
|
857
|
+
name: 'smartLinks',
|
|
858
|
+
type: 'SmartLinksOptions'
|
|
859
|
+
}, {
|
|
860
|
+
name: 'stickyHeaders',
|
|
861
|
+
type: 'boolean | ({ show?: boolean; } & { offsetTop?: number; } & StickyHeaderConfig_DO_NOT_USE)'
|
|
862
|
+
}, {
|
|
863
|
+
name: 'textHighlighter',
|
|
864
|
+
type: '{ component: React.ComponentType<{ children: React.ReactNode; groups: string[]; marks: Set<string>; match: string; startPos: number; }>; pattern: RegExp; }'
|
|
865
|
+
}, {
|
|
866
|
+
name: 'timeZone',
|
|
867
|
+
type: 'string'
|
|
868
|
+
}, {
|
|
869
|
+
name: 'truncated',
|
|
870
|
+
type: 'boolean'
|
|
871
|
+
}, {
|
|
872
|
+
name: 'UNSTABLE_allowTableAlignment',
|
|
873
|
+
type: 'boolean'
|
|
874
|
+
}, {
|
|
875
|
+
name: 'UNSTABLE_allowTableResizing',
|
|
876
|
+
type: 'boolean'
|
|
877
|
+
}, {
|
|
878
|
+
name: 'UNSTABLE_isPresentational',
|
|
879
|
+
type: 'boolean',
|
|
880
|
+
description: 'When true, elements may render without their default semantic roles\n(e.g., using role="presentation"), indicating that they are used solely for layout or styling purposes.\nElements currently affected: Tables.'
|
|
881
|
+
}, {
|
|
882
|
+
name: 'unsupportedContentLevelsTracking',
|
|
883
|
+
type: '{ enabled: boolean; samplingRates?: { [key: string]: number; }; thresholds?: Partial<UnsupportedContentLevelThresholds>; }'
|
|
884
|
+
}]
|
|
885
|
+
}, {
|
|
886
|
+
name: 'ConfluenceSearchConfigModal',
|
|
887
|
+
package: '@atlaskit/link-datasource',
|
|
888
|
+
description: 'Configuration modal for the Confluence search datasource. Lets users set up a "list of links" backed by a Confluence search query (space, query, sort) and produces Confluence search datasource ADF.',
|
|
889
|
+
status: 'general-availability',
|
|
890
|
+
usageGuidelines: ['Use when the user is configuring a Confluence search-based list of links (e.g. in a block or sidebar). On confirm, use the returned parameters to build datasource ADF or pass to DatasourceTableView.'],
|
|
891
|
+
contentGuidelines: [],
|
|
892
|
+
accessibilityGuidelines: ['Ensure the modal has an accessible title and focus is trapped; form fields (space, query, sort) must have labels and error messages announced.'],
|
|
893
|
+
keywords: ['link-datasource', 'confluence', 'search', 'datasource', 'config', 'modal'],
|
|
894
|
+
category: 'linking',
|
|
895
|
+
examples: ["import React, { useState } from 'react';\nimport { IntlProvider } from 'react-intl';\nimport Button from '@atlaskit/button/standard-button';\nimport { SmartCardProvider } from '@atlaskit/link-provider';\nimport {\n\tdefaultInitialVisibleConfluenceColumnKeys,\n\tmockBasicFilterAGGFetchRequests,\n\tmockDatasourceFetchRequests,\n\tmockProductsData,\n\tmockSiteData,\n} from '@atlaskit/link-test-helpers/datasource';\nimport SmartLinkClient from '../../examples-helpers/smartLinkCustomClient';\nimport { CONFLUENCE_SEARCH_DATASOURCE_ID } from '../../src/ui/confluence-search-modal';\nimport { ConfluenceSearchConfigModal } from '../../src/ui/confluence-search-modal/modal';\nimport { type ConfluenceSearchDatasourceParameters } from '../../src/ui/confluence-search-modal/types';\nmockDatasourceFetchRequests({\n\ttype: 'confluence',\n\tdelayedResponse: false,\n\tshouldMockORSBatch: true,\n\tavailableSitesOverride: mockSiteData.filter(\n\t\t(site) => !['test1', 'test2', 'test4'].includes(site.displayName),\n\t),\n\taccessibleProductsOverride: mockProductsData.filter((product) =>\n\t\t['confluence.ondemand'].includes(product.productId),\n\t),\n});\nmockBasicFilterAGGFetchRequests();\nexport default (): React.JSX.Element => {\n\tconst [showModal, setShowModal] = useState(false);\n\tconst [parameters] = useState<ConfluenceSearchDatasourceParameters>({\n\t\tcloudId: '67899',\n\t\tsearchString: 'Searched something',\n\t});\n\tconst [visibleColumnKeys] = useState<string[] | undefined>(\n\t\tdefaultInitialVisibleConfluenceColumnKeys,\n\t);\n\tconst toggleIsOpen = () => setShowModal((prevOpenState) => !prevOpenState);\n\tconst closeModal = () => setShowModal(false);\n\treturn (\n\t\t<IntlProvider locale=\"en\">\n\t\t\t<SmartCardProvider client={new SmartLinkClient()}>\n\t\t\t\t<Button appearance=\"primary\" onClick={toggleIsOpen}>\n\t\t\t\t\tToggle Modal\n\t\t\t\t</Button>\n\t\t\t\t{showModal && (\n\t\t\t\t\t<ConfluenceSearchConfigModal\n\t\t\t\t\t\tdatasourceId={CONFLUENCE_SEARCH_DATASOURCE_ID}\n\t\t\t\t\t\tvisibleColumnKeys={visibleColumnKeys}\n\t\t\t\t\t\tparameters={parameters}\n\t\t\t\t\t\tonCancel={closeModal}\n\t\t\t\t\t\tonInsert={closeModal}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</SmartCardProvider>\n\t\t</IntlProvider>\n\t);\n};"],
|
|
896
|
+
props: [{
|
|
897
|
+
name: 'columnCustomSizes',
|
|
898
|
+
type: 'ColumnSizesMap',
|
|
899
|
+
description: 'Map of column key to custom column width'
|
|
900
|
+
}, {
|
|
901
|
+
name: 'datasourceId',
|
|
902
|
+
type: 'string',
|
|
903
|
+
description: 'Unique identifier for which type of datasource is being rendered and for making its requests',
|
|
904
|
+
isRequired: true
|
|
905
|
+
}, {
|
|
906
|
+
name: 'disableDisplayDropdown',
|
|
907
|
+
type: 'boolean',
|
|
908
|
+
description: 'Disable the view mode display dropdown'
|
|
909
|
+
}, {
|
|
910
|
+
name: 'disableSiteSelector',
|
|
911
|
+
type: 'boolean'
|
|
912
|
+
}, {
|
|
913
|
+
name: 'onCancel',
|
|
914
|
+
type: '() => void',
|
|
915
|
+
description: 'Callback function to be invoked when the modal is closed either via cancel button click, esc keydown, or modal blanket click',
|
|
916
|
+
isRequired: true
|
|
917
|
+
}, {
|
|
918
|
+
name: 'onInsert',
|
|
919
|
+
type: '(adf: InlineCardAdf | ConfluenceSearchDatasourceAdf, analyticsEvent?: UIAnalyticsEvent) => void',
|
|
920
|
+
description: 'Callback function to be invoked when the insert issues button is clicked',
|
|
921
|
+
isRequired: true
|
|
922
|
+
}, {
|
|
923
|
+
name: 'overrideParameters',
|
|
924
|
+
type: '{ entityTypes?: string[]; }'
|
|
925
|
+
}, {
|
|
926
|
+
name: 'parameters',
|
|
927
|
+
type: 'DatasourceParameters | ConfluenceSearchDatasourceParameters',
|
|
928
|
+
description: 'Parameters for making the data requests necessary to render data within the table'
|
|
929
|
+
}, {
|
|
930
|
+
name: 'shouldReturnFocus',
|
|
931
|
+
type: 'boolean | React.RefObject<HTMLElement>',
|
|
932
|
+
description: 'Set the focus to return to the element that had focus before focus lock was activated or pass through a specific ref element\nDefaults to false, meaning focus remains where it was when the FocusLock was deactivated'
|
|
933
|
+
}, {
|
|
934
|
+
name: 'url',
|
|
935
|
+
type: 'string',
|
|
936
|
+
description: 'The url that was used to insert a List of Links'
|
|
937
|
+
}, {
|
|
938
|
+
name: 'viewMode',
|
|
939
|
+
type: '"table" | "inline"',
|
|
940
|
+
description: "The view mode that the modal will show on open:\n- Table = Displays a list of links in table format\n- Inline = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue."
|
|
941
|
+
}, {
|
|
942
|
+
name: 'visibleColumnKeys',
|
|
943
|
+
type: 'string[]',
|
|
944
|
+
description: 'List of properties/column keys that are visible/selected'
|
|
945
|
+
}, {
|
|
946
|
+
name: 'wrappedColumnKeys',
|
|
947
|
+
type: 'string[]',
|
|
948
|
+
description: 'List of column keys that needs to be shown without truncation (content will wrap to a new line)'
|
|
949
|
+
}]
|
|
950
|
+
}, {
|
|
951
|
+
name: 'JiraIssuesConfigModal',
|
|
952
|
+
package: '@atlaskit/link-datasource',
|
|
953
|
+
description: 'Configuration modal for the Jira issues datasource. Lets users set up a list of Jira issues (JQL, columns, filters) and produces Jira issues datasource ADF.',
|
|
954
|
+
status: 'general-availability',
|
|
955
|
+
usageGuidelines: ['Use when the user is configuring a Jira issues list (e.g. in a block or table). On confirm, use the returned parameters for datasource ADF or DatasourceTableView.'],
|
|
956
|
+
contentGuidelines: [],
|
|
957
|
+
accessibilityGuidelines: ['Ensure the modal has an accessible title and focus management; JQL and column pickers must have clear labels and error announcements.'],
|
|
958
|
+
keywords: ['link-datasource', 'jira', 'issues', 'datasource', 'config', 'modal', 'JQL'],
|
|
959
|
+
category: 'linking',
|
|
960
|
+
examples: ["import React, { useState } from 'react';\nimport { IntlProvider } from 'react-intl';\nimport Button from '@atlaskit/button/new';\nimport { SmartCardProvider } from '@atlaskit/link-provider';\nimport {\n\tdefaultInitialVisibleJiraColumnKeys,\n\tmockBasicFilterAGGFetchRequests,\n\tmockDatasourceFetchRequests,\n\tmockProductsData,\n\tmockSiteData,\n} from '@atlaskit/link-test-helpers/datasource';\nimport SmartLinkClient from '../../examples-helpers/smartLinkCustomClient';\nimport { JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '../../src';\nmockDatasourceFetchRequests({\n\tdelayedResponse: false,\n\tshouldMockORSBatch: true,\n\tavailableSitesOverride: mockSiteData\n\t\t.map((site, index) => ({\n\t\t\t...site,\n\t\t\tcloudId: index === 0 ? 'doc-cloudId' : site.cloudId,\n\t\t}))\n\t\t.filter((site) => !['test1', 'test2', 'test4'].includes(site.displayName)),\n\taccessibleProductsOverride: mockProductsData\n\t\t.filter((product) => ['jira-servicedesk.ondemand'].includes(product.productId))\n\t\t.flatMap((product) => ({\n\t\t\t...product,\n\t\t\tworkspaces: product.workspaces?.map((workspace, index) => ({\n\t\t\t\t...workspace,\n\t\t\t\tcloudId: index === 0 ? 'doc-cloudId' : workspace.cloudId,\n\t\t\t})),\n\t\t})),\n});\nmockBasicFilterAGGFetchRequests({ withJiraFilterHydration: false });\nexport default (): React.JSX.Element => {\n\tconst [showModal, setShowModal] = useState(false);\n\tconst [visibleColumnKeys] = useState<string[] | undefined>(defaultInitialVisibleJiraColumnKeys);\n\tconst [columnCustomSizes] = useState<{ [key: string]: number } | undefined>();\n\tconst [wrappedColumnKeys] = useState<string[] | undefined>();\n\tconst toggleIsOpen = () => setShowModal((prevOpenState) => !prevOpenState);\n\tconst closeModal = () => setShowModal(false);\n\treturn (\n\t\t<IntlProvider locale=\"en\">\n\t\t\t<SmartCardProvider client={new SmartLinkClient()}>\n\t\t\t\t<Button appearance=\"primary\" onClick={toggleIsOpen}>\n\t\t\t\t\tToggle Modal\n\t\t\t\t</Button>\n\t\t\t\t{showModal && (\n\t\t\t\t\t<JiraIssuesConfigModal\n\t\t\t\t\t\tdatasourceId={JIRA_LIST_OF_LINKS_DATASOURCE_ID}\n\t\t\t\t\t\tvisibleColumnKeys={visibleColumnKeys}\n\t\t\t\t\t\tcolumnCustomSizes={columnCustomSizes}\n\t\t\t\t\t\twrappedColumnKeys={wrappedColumnKeys}\n\t\t\t\t\t\tparameters={{ cloudId: 'doc-cloudId' }}\n\t\t\t\t\t\tonCancel={closeModal}\n\t\t\t\t\t\tonInsert={closeModal}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</SmartCardProvider>\n\t\t</IntlProvider>\n\t);\n};", "import { DatasourceTableView } from '@atlaskit/link-datasource';\nimport { ExampleJiraIssuesTableView } from '../examples-helpers/buildJiraIssuesTable';\nimport { FakeModalDialogContainer } from '../examples-helpers/fakeModalDialogContainer';\nexport default (): React.JSX.Element => {\n\treturn (\n\t\t<FakeModalDialogContainer>\n\t\t\t<ExampleJiraIssuesTableView DatasourceTable={DatasourceTableView} />\n\t\t</FakeModalDialogContainer>\n\t);\n};"],
|
|
961
|
+
props: [{
|
|
962
|
+
name: 'columnCustomSizes',
|
|
963
|
+
type: 'ColumnSizesMap',
|
|
964
|
+
description: 'Map of column key to custom column width'
|
|
965
|
+
}, {
|
|
966
|
+
name: 'datasourceId',
|
|
967
|
+
type: 'string',
|
|
968
|
+
description: 'Unique identifier for which type of datasource is being rendered and for making its requests',
|
|
969
|
+
isRequired: true
|
|
970
|
+
}, {
|
|
971
|
+
name: 'disableDisplayDropdown',
|
|
972
|
+
type: 'boolean',
|
|
973
|
+
description: 'Disable the view mode display dropdown'
|
|
974
|
+
}, {
|
|
975
|
+
name: 'onCancel',
|
|
976
|
+
type: '() => void',
|
|
977
|
+
description: 'Callback function to be invoked when the modal is closed either via cancel button click, esc keydown, or modal blanket click',
|
|
978
|
+
isRequired: true
|
|
979
|
+
}, {
|
|
980
|
+
name: 'onInsert',
|
|
981
|
+
type: '(adf: InlineCardAdf | DatasourceAdf<Record<string, unknown>>, analyticsEvent?: UIAnalyticsEvent) => void',
|
|
982
|
+
description: 'Callback function to be invoked when the insert issues button is clicked',
|
|
983
|
+
isRequired: true
|
|
984
|
+
}, {
|
|
985
|
+
name: 'parameters',
|
|
986
|
+
type: 'DatasourceParameters | JiraIssueDatasourceParameters',
|
|
987
|
+
description: 'Parameters for making the data requests necessary to render data within the table'
|
|
988
|
+
}, {
|
|
989
|
+
name: 'shouldReturnFocus',
|
|
990
|
+
type: 'boolean | React.RefObject<HTMLElement>',
|
|
991
|
+
description: 'Set the focus to return to the element that had focus before focus lock was activated or pass through a specific ref element\nDefaults to false, meaning focus remains where it was when the FocusLock was deactivated'
|
|
992
|
+
}, {
|
|
993
|
+
name: 'url',
|
|
994
|
+
type: 'string',
|
|
995
|
+
description: 'The url that was used to insert a List of Links'
|
|
996
|
+
}, {
|
|
997
|
+
name: 'viewMode',
|
|
998
|
+
type: '"table" | "inline"',
|
|
999
|
+
description: "The view mode that the modal will show on open:\n- Table = Displays a list of links in table format\n- Inline = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue."
|
|
1000
|
+
}, {
|
|
1001
|
+
name: 'visibleColumnKeys',
|
|
1002
|
+
type: 'string[]',
|
|
1003
|
+
description: 'List of properties/column keys that are visible/selected'
|
|
1004
|
+
}, {
|
|
1005
|
+
name: 'wrappedColumnKeys',
|
|
1006
|
+
type: 'string[]',
|
|
1007
|
+
description: 'List of column keys that needs to be shown without truncation (content will wrap to a new line)'
|
|
1008
|
+
}]
|
|
1009
|
+
}, {
|
|
1010
|
+
name: 'AssetsConfigModal',
|
|
1011
|
+
package: '@atlaskit/link-datasource',
|
|
1012
|
+
description: 'Configuration modal for the Assets (object schema) datasource. Lets users set up a list of links from an Assets schema and produces Assets datasource ADF.',
|
|
1013
|
+
status: 'general-availability',
|
|
1014
|
+
usageGuidelines: ['Use when the user is configuring an Assets-based list of links. On confirm, use the returned parameters for datasource ADF or table view.'],
|
|
1015
|
+
contentGuidelines: [],
|
|
1016
|
+
accessibilityGuidelines: ['Ensure the modal has an accessible title and that schema/object pickers have clear labels.'],
|
|
1017
|
+
keywords: ['link-datasource', 'assets', 'datasource', 'config', 'modal'],
|
|
1018
|
+
category: 'linking',
|
|
1019
|
+
examples: ["import React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport { SmartCardProvider } from '@atlaskit/link-provider';\nimport { mockAssetsClientFetchRequests } from '@atlaskit/link-test-helpers/assets';\nimport SmartLinkClient from '../../examples-helpers/smartLinkCustomClient';\nimport { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, type AssetsDatasourceParameters } from '../../src';\nimport JSMAssetsConfigModal from '../../src/ui/assets-modal';\nmockAssetsClientFetchRequests({ delayedResponse: false });\nconst mockVisibleColumnKeys = [\n\t'Key',\n\t'Label',\n\t'Created',\n\t'Is Virtual',\n\t'Hardware Components',\n\t'Applications',\n\t'Software Services',\n\t'Number of Slots',\n\t'Primary Capability',\n\t'Owners',\n\t'Notes',\n];\nexport default (): React.JSX.Element => {\n\tconst [showModal, setShowModal] = useState(false);\n\tconst [parameters] = useState<AssetsDatasourceParameters>({\n\t\taql: 'dummy aql',\n\t\tworkspaceId: '',\n\t\tschemaId: '1',\n\t});\n\tconst [visibleColumnKeys] = useState<string[] | undefined>(mockVisibleColumnKeys);\n\tconst toggleIsOpen = () => setShowModal((prevOpenState) => !prevOpenState);\n\tconst closeModal = () => setShowModal(false);\n\treturn (\n\t\t<SmartCardProvider client={new SmartLinkClient()}>\n\t\t\t<Button appearance=\"primary\" onClick={toggleIsOpen}>\n\t\t\t\tToggle Modal\n\t\t\t</Button>\n\t\t\t{showModal && (\n\t\t\t\t<JSMAssetsConfigModal\n\t\t\t\t\tdatasourceId={ASSETS_LIST_OF_LINKS_DATASOURCE_ID}\n\t\t\t\t\tvisibleColumnKeys={visibleColumnKeys}\n\t\t\t\t\tparameters={parameters}\n\t\t\t\t\tonCancel={closeModal}\n\t\t\t\t\tonInsert={closeModal}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</SmartCardProvider>\n\t);\n};"],
|
|
1020
|
+
props: [{
|
|
1021
|
+
name: 'columnCustomSizes',
|
|
1022
|
+
type: 'ColumnSizesMap',
|
|
1023
|
+
description: 'Map of column key to custom column width'
|
|
1024
|
+
}, {
|
|
1025
|
+
name: 'datasourceId',
|
|
1026
|
+
type: 'string',
|
|
1027
|
+
description: 'Unique identifier for which type of datasource is being rendered and for making its requests',
|
|
1028
|
+
isRequired: true
|
|
1029
|
+
}, {
|
|
1030
|
+
name: 'disableDisplayDropdown',
|
|
1031
|
+
type: 'boolean',
|
|
1032
|
+
description: 'Disable the view mode display dropdown'
|
|
1033
|
+
}, {
|
|
1034
|
+
name: 'onCancel',
|
|
1035
|
+
type: '() => void',
|
|
1036
|
+
description: 'Callback function to be invoked when the modal is closed either via cancel button click, esc keydown, or modal blanket click',
|
|
1037
|
+
isRequired: true
|
|
1038
|
+
}, {
|
|
1039
|
+
name: 'onInsert',
|
|
1040
|
+
type: '(adf: InlineCardAdf | AssetsDatasourceAdf, analyticsEvent?: UIAnalyticsEvent) => void',
|
|
1041
|
+
description: 'Callback function to be invoked when the insert issues button is clicked',
|
|
1042
|
+
isRequired: true
|
|
1043
|
+
}, {
|
|
1044
|
+
name: 'parameters',
|
|
1045
|
+
type: 'DatasourceParameters | AssetsDatasourceParameters',
|
|
1046
|
+
description: 'Parameters for making the data requests necessary to render data within the table'
|
|
1047
|
+
}, {
|
|
1048
|
+
name: 'shouldReturnFocus',
|
|
1049
|
+
type: 'boolean | React.RefObject<HTMLElement>',
|
|
1050
|
+
description: 'Set the focus to return to the element that had focus before focus lock was activated or pass through a specific ref element\nDefaults to false, meaning focus remains where it was when the FocusLock was deactivated'
|
|
1051
|
+
}, {
|
|
1052
|
+
name: 'url',
|
|
1053
|
+
type: 'string',
|
|
1054
|
+
description: 'The url that was used to insert a List of Links'
|
|
1055
|
+
}, {
|
|
1056
|
+
name: 'viewMode',
|
|
1057
|
+
type: '"table" | "inline"',
|
|
1058
|
+
description: "The view mode that the modal will show on open:\n- Table = Displays a list of links in table format\n- Inline = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue."
|
|
1059
|
+
}, {
|
|
1060
|
+
name: 'visibleColumnKeys',
|
|
1061
|
+
type: 'string[]',
|
|
1062
|
+
description: 'List of properties/column keys that are visible/selected'
|
|
1063
|
+
}, {
|
|
1064
|
+
name: 'wrappedColumnKeys',
|
|
1065
|
+
type: 'string[]',
|
|
1066
|
+
description: 'List of column keys that needs to be shown without truncation (content will wrap to a new line)'
|
|
1067
|
+
}]
|
|
1068
|
+
}, {
|
|
1069
|
+
name: 'DatasourceTableView',
|
|
1070
|
+
package: '@atlaskit/link-datasource',
|
|
1071
|
+
description: 'Table view component that renders a datasource (list of links) with configurable columns, sorting, and actions. Consumes datasource ADF or parameters and fetches data via the link client.',
|
|
1072
|
+
status: 'general-availability',
|
|
1073
|
+
usageGuidelines: ['Use when you need to display a list of links (Jira issues, Confluence search, Assets) in a table. Pass the datasource ADF or parameters; wrap in SmartCardProvider so resolution and actions work.'],
|
|
1074
|
+
contentGuidelines: [],
|
|
1075
|
+
accessibilityGuidelines: ['Ensure the table has a caption or aria-label; column headers and sort controls must be focusable and announced. Loading and error states should be announced.'],
|
|
1076
|
+
keywords: ['link-datasource', 'table', 'datasource', 'list of links', 'view'],
|
|
1077
|
+
category: 'linking',
|
|
1078
|
+
examples: ["import { DatasourceTableView } from '@atlaskit/link-datasource';\nimport { ExampleJiraIssuesTableView } from '../examples-helpers/buildJiraIssuesTable';\nimport { FakeModalDialogContainer } from '../examples-helpers/fakeModalDialogContainer';\nexport default (): React.JSX.Element => {\n\treturn (\n\t\t<FakeModalDialogContainer>\n\t\t\t<ExampleJiraIssuesTableView DatasourceTable={DatasourceTableView} />\n\t\t</FakeModalDialogContainer>\n\t);\n};"],
|
|
1079
|
+
props: [{
|
|
1080
|
+
name: 'columnCustomSizes',
|
|
1081
|
+
type: 'ColumnSizesMap',
|
|
1082
|
+
description: 'Map of column key to custom column width'
|
|
1083
|
+
}, {
|
|
1084
|
+
name: 'datasourceId',
|
|
1085
|
+
type: 'string',
|
|
1086
|
+
description: 'Unique identifier for which type of datasource is being rendered and for making its requests',
|
|
1087
|
+
isRequired: true
|
|
1088
|
+
}, {
|
|
1089
|
+
name: 'onColumnResize',
|
|
1090
|
+
type: '(key: string, width: number) => void'
|
|
1091
|
+
}, {
|
|
1092
|
+
name: 'onVisibleColumnKeysChange',
|
|
1093
|
+
type: '(visibleColumnKeys: string[]) => void',
|
|
1094
|
+
description: 'Callback to be invoked whenever a user changes the visible columns in a datasource table\neither by selecting/unselecting or reordering (drag and drop)\n\n@param visibleColumnKeys the array of keys for all of the selected columns'
|
|
1095
|
+
}, {
|
|
1096
|
+
name: 'onWrappedColumnChange',
|
|
1097
|
+
type: '(key: string, shouldWrap: boolean) => void',
|
|
1098
|
+
description: 'Callback to be invoked whenever user changes wrap attribute of the column.\n\n@param key Column key\n@param shouldWrap Whenever column should wrap'
|
|
1099
|
+
}, {
|
|
1100
|
+
name: 'parameters',
|
|
1101
|
+
type: 'DatasourceParameters',
|
|
1102
|
+
description: 'Parameters for making the data requests necessary to render data within the table',
|
|
1103
|
+
isRequired: true
|
|
1104
|
+
}, {
|
|
1105
|
+
name: 'scrollableContainerHeight',
|
|
1106
|
+
type: 'number',
|
|
1107
|
+
description: 'If this number is set it will restrict (max-height) maximum size of the component AND make main container a scrollable container.\nIt this number is 0 it will not restrict height and not make container scrollable.'
|
|
1108
|
+
}, {
|
|
1109
|
+
name: 'url',
|
|
1110
|
+
type: 'string',
|
|
1111
|
+
description: 'Url for an existing datasource, initially used for displaying to a user unauthorized to query that site'
|
|
1112
|
+
}, {
|
|
1113
|
+
name: 'visibleColumnKeys',
|
|
1114
|
+
type: 'string[]',
|
|
1115
|
+
description: 'List of properties/column keys that are visible/selected'
|
|
1116
|
+
}, {
|
|
1117
|
+
name: 'wrappedColumnKeys',
|
|
1118
|
+
type: 'string[]',
|
|
1119
|
+
description: 'List of column keys that needs to be shown without truncation (content will wrap to a new line)'
|
|
1120
|
+
}]
|
|
1121
|
+
}, {
|
|
1122
|
+
name: 'LinkPicker',
|
|
1123
|
+
package: '@atlaskit/link-picker',
|
|
1124
|
+
description: 'Standalone link picker UI that lets users search and select links to insert. Supports plugins for different data sources (recents, search, Jira, Confluence, etc.) and can be used in modals, popups, or inline.',
|
|
1125
|
+
status: 'general-availability',
|
|
1126
|
+
usageGuidelines: ['Use when the user needs to choose a link to insert (e.g. in an editor, form, or toolbar). Add plugins to define tabs and data sources; use SmartCardProvider above the picker so selected links resolve correctly.'],
|
|
1127
|
+
contentGuidelines: [],
|
|
1128
|
+
accessibilityGuidelines: ['Ensure the picker is focusable and has an accessible name (e.g. "Insert link"). Provide a keyboard-accessible way to open and close; ensure search and results are announced to screen readers.'],
|
|
1129
|
+
keywords: ['link-picker', 'link', 'picker', 'search', 'insert link', 'plugins'],
|
|
1130
|
+
category: 'linking',
|
|
1131
|
+
examples: ["import React, { Fragment, type SyntheticEvent, useMemo, useState } from 'react';\nimport Link from '@atlaskit/link';\nimport { useSmartLinkLifecycleAnalytics } from '@atlaskit/link-analytics';\nimport { token } from '@atlaskit/tokens';\nimport { AtlassianLinkPickerPlugin, Scope } from '@atlassian/link-picker-atlassian-plugin';\nimport { mockEndpoints } from '@atlassian/recent-work-client/mocks';\nimport { PageWrapper } from '../example-helpers/common';\nimport { mockPluginEndpoints } from '../example-helpers/mock-plugin-endpoints';\nimport { MOCK_DATA_V3 as mockRecentData } from '../example-helpers/mock-recents-data';\nimport { LinkPicker, type LinkPickerProps } from '../src';\ntype OnSubmitPayload = Parameters<LinkPickerProps['onSubmit']>[0];\nmockPluginEndpoints();\nmockEndpoints(undefined, undefined, mockRecentData);\nfunction Basic() {\n\tconst [link, setLink] = useState<OnSubmitPayload>({\n\t\turl: '',\n\t\tdisplayText: null,\n\t\ttitle: null,\n\t\tmeta: {\n\t\t\tinputMethod: 'manual',\n\t\t},\n\t});\n\tconst linkAnalytics = useSmartLinkLifecycleAnalytics();\n\tconst handleSubmit: LinkPickerProps['onSubmit'] = (payload, analytic) => {\n\t\tsetLink(payload);\n\t\tlinkAnalytics.linkCreated(payload, analytic);\n\t};\n\tconst handleClick = (e: SyntheticEvent) => {\n\t\te.preventDefault();\n\t};\n\tconst plugins = useMemo(\n\t\t() => [\n\t\t\tnew AtlassianLinkPickerPlugin({\n\t\t\t\tcloudId: 'DUMMY-a5a01d21-1cc3-4f29-9565-f2bb8cd969f5',\n\t\t\t\tscope: Scope.ConfluenceContentType,\n\t\t\t\taggregatorUrl: 'https://pug.jira-dev.com/gateway/api/xpsearch-aggregator',\n\t\t\t\tactivityClientEndpoint: 'https://pug.jira-dev.com/gateway/api/graphql',\n\t\t\t}),\n\t\t],\n\t\t[],\n\t);\n\treturn (\n\t\t<Fragment>\n\t\t\t{\n\t\t\t<div style={{ paddingBottom: token('space.250') }}>\n\t\t\t\t<Link id=\"test-link\" href={link.url} target=\"_blank\" onClick={handleClick}>\n\t\t\t\t\t{link.displayText || link.url}\n\t\t\t\t</Link>\n\t\t\t</div>\n\t\t\t<LinkPicker\n\t\t\t\tplugins={plugins}\n\t\t\t\turl={link.url}\n\t\t\t\tdisplayText={link.displayText}\n\t\t\t\tonSubmit={handleSubmit}\n\t\t\t/>\n\t\t</Fragment>\n\t);\n}\nexport default function BasicWrapper(): React.JSX.Element {\n\treturn (\n\t\t<PageWrapper>\n\t\t\t<Basic />\n\t\t</PageWrapper>\n\t);\n}", "import React, { Fragment, type SyntheticEvent, useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport Link from '@atlaskit/link';\nimport Popup from '@atlaskit/popup';\nimport { token } from '@atlaskit/tokens';\nimport { PageHeader, PageWrapper } from '../example-helpers/common';\nimport { LinkPicker } from '../src';\ntype OnSubmitPayload = Parameters<Required<React.ComponentProps<typeof LinkPicker>>['onSubmit']>[0];\nfunction WithoutPlugins() {\n\tconst [isOpen, setIsOpen] = useState(true);\n\tconst [link, setLink] = useState<OnSubmitPayload>({\n\t\turl: '',\n\t\tdisplayText: null,\n\t\ttitle: null,\n\t\tmeta: {\n\t\t\tinputMethod: 'manual',\n\t\t},\n\t});\n\tconst handleToggle = () => setIsOpen(!isOpen);\n\tconst handleSubmit = (payload: OnSubmitPayload) => {\n\t\tsetLink(payload);\n\t\tsetIsOpen(false);\n\t};\n\tconst handleClick = (e: SyntheticEvent) => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tsetIsOpen(true);\n\t};\n\tconst linkPickerInPopup = (\n\t\t<Popup\n\t\t\tisOpen={isOpen}\n\t\t\tautoFocus={false}\n\t\t\tonClose={handleToggle}\n\t\t\tcontent={({ update }) => (\n\t\t\t\t<LinkPicker\n\t\t\t\t\turl={link.url}\n\t\t\t\t\tdisplayText={link.displayText}\n\t\t\t\t\tonSubmit={handleSubmit}\n\t\t\t\t\tonCancel={handleToggle}\n\t\t\t\t\tonContentResize={update}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\tplacement=\"right-start\"\n\t\t\ttrigger={({ ref, ...triggerProps }) => (\n\t\t\t\t<Button\n\t\t\t\t\t{...triggerProps}\n\t\t\t\t\tref={ref}\n\t\t\t\t\tappearance=\"primary\"\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\tonClick={handleToggle}\n\t\t\t\t>\n\t\t\t\t\t{isOpen ? '-' : '+'}\n\t\t\t\t</Button>\n\t\t\t)}\n\t\t/>\n\t);\n\treturn (\n\t\t<Fragment>\n\t\t\t<PageHeader>\n\t\t\t\t<p>\n\t\t\t\t\t<b>LinkPicker</b> without search, used as an interface to submit a valid link with custom\n\t\t\t\t\tdisplay text.\n\t\t\t\t</p>\n\t\t\t</PageHeader>\n\t\t\t{\n\t\t\t<div style={{ paddingBottom: token('space.250') }}>\n\t\t\t\t<Link id=\"test-link\" href={link.url} target=\"_blank\" onClick={handleClick}>\n\t\t\t\t\t{link.displayText || link.url}\n\t\t\t\t</Link>\n\t\t\t</div>\n\t\t\t{linkPickerInPopup}\n\t\t</Fragment>\n\t);\n}\nexport default function WithoutPluginsWrapper(): React.JSX.Element {\n\treturn (\n\t\t<PageWrapper>\n\t\t\t<WithoutPlugins />\n\t\t</PageWrapper>\n\t);\n}"],
|
|
1132
|
+
props: [{
|
|
1133
|
+
name: 'adaptiveHeight',
|
|
1134
|
+
type: 'boolean',
|
|
1135
|
+
description: 'Allows height of search results to adapt to the number of results being displayed.'
|
|
1136
|
+
}, {
|
|
1137
|
+
name: 'additionalError',
|
|
1138
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
1139
|
+
description: 'This prop passes one additional error that is secondary to component errors'
|
|
1140
|
+
}, {
|
|
1141
|
+
name: 'alwaysShowTabs',
|
|
1142
|
+
type: 'boolean',
|
|
1143
|
+
description: 'When true, tabs are displayed even if there is only one plugin.'
|
|
1144
|
+
}, {
|
|
1145
|
+
name: 'component',
|
|
1146
|
+
type: 'ComponentClass<Partial<LinkPickerProps> & { children: ReactElement<any, string | JSXElementConstructor<any>>; }, any> | FunctionComponent<...>',
|
|
1147
|
+
description: 'Customise the link picker root component'
|
|
1148
|
+
}, {
|
|
1149
|
+
name: 'customMessages',
|
|
1150
|
+
type: '{ linkLabel?: MessageDescriptor; linkAriaLabel?: MessageDescriptor; linkPlaceholder?: MessageDescriptor; linkTextLabel?: MessageDescriptor; linkTextPlaceholder?: MessageDescriptor; linkHelperTextLabel?: MessageDescriptor; submitButtonLabel?: MessageDescriptor; }',
|
|
1151
|
+
description: 'Allows for customisation of text in the link picker.'
|
|
1152
|
+
}, {
|
|
1153
|
+
name: 'disableWidth',
|
|
1154
|
+
type: 'boolean',
|
|
1155
|
+
description: 'Disables the default width containing the link picker.'
|
|
1156
|
+
}, {
|
|
1157
|
+
name: 'displayHelperText',
|
|
1158
|
+
type: 'string',
|
|
1159
|
+
description: 'The desired text to be displayed below the display text input field. Only displayed when `platform-linking-visual-refresh-link-picker` gate is enabled.'
|
|
1160
|
+
}, {
|
|
1161
|
+
name: 'displayText',
|
|
1162
|
+
type: 'string',
|
|
1163
|
+
description: 'The desired text to be displayed alternatively to the title of the linked resource for editing.'
|
|
1164
|
+
}, {
|
|
1165
|
+
name: 'featureFlags',
|
|
1166
|
+
type: '{ [x: string]: unknown; }'
|
|
1167
|
+
}, {
|
|
1168
|
+
name: 'hideDisplayText',
|
|
1169
|
+
type: 'boolean',
|
|
1170
|
+
description: 'Hides the link picker display text field if set to true.'
|
|
1171
|
+
}, {
|
|
1172
|
+
name: 'inputRef',
|
|
1173
|
+
type: '((instance: HTMLInputElement) => void) | RefObject<HTMLInputElement>',
|
|
1174
|
+
description: 'Ref to the link picker search input.'
|
|
1175
|
+
}, {
|
|
1176
|
+
name: 'isLoadingPlugins',
|
|
1177
|
+
type: 'boolean',
|
|
1178
|
+
description: 'If set true, Link picker will show the loading spinner where the tabs and results will show.'
|
|
1179
|
+
}, {
|
|
1180
|
+
name: 'isSubmitting',
|
|
1181
|
+
type: 'boolean',
|
|
1182
|
+
description: 'Controls showing a "submission in-progres" UX'
|
|
1183
|
+
}, {
|
|
1184
|
+
name: 'moveSubmitButton',
|
|
1185
|
+
type: 'boolean',
|
|
1186
|
+
description: 'This prop controls where the submit button appears. When true the submit button will move below the input field and be full width'
|
|
1187
|
+
}, {
|
|
1188
|
+
name: 'onCancel',
|
|
1189
|
+
type: '() => void',
|
|
1190
|
+
description: 'Callback to fire when the cancel button is clicked.\nIf not provided, cancel button is not displayed.'
|
|
1191
|
+
}, {
|
|
1192
|
+
name: 'onContentResize',
|
|
1193
|
+
type: '() => void',
|
|
1194
|
+
description: 'Callback to fire when content is changed inside the link picker e.g. items, when loading, tabs'
|
|
1195
|
+
}, {
|
|
1196
|
+
name: 'onSubmit',
|
|
1197
|
+
type: '(arg: OnSubmitParameter, analytic?: UIAnalyticsEvent) => void',
|
|
1198
|
+
description: 'Callback to fire on form submission.',
|
|
1199
|
+
isRequired: true
|
|
1200
|
+
}, {
|
|
1201
|
+
name: 'paddingBottom',
|
|
1202
|
+
type: 'string',
|
|
1203
|
+
description: 'Override the default bottom padding.'
|
|
1204
|
+
}, {
|
|
1205
|
+
name: 'paddingLeft',
|
|
1206
|
+
type: 'string',
|
|
1207
|
+
description: 'Override the default left padding.'
|
|
1208
|
+
}, {
|
|
1209
|
+
name: 'paddingRight',
|
|
1210
|
+
type: 'string',
|
|
1211
|
+
description: 'Override the default right padding.'
|
|
1212
|
+
}, {
|
|
1213
|
+
name: 'paddingTop',
|
|
1214
|
+
type: 'string',
|
|
1215
|
+
description: 'Override the default top padding.'
|
|
1216
|
+
}, {
|
|
1217
|
+
name: 'plugins',
|
|
1218
|
+
type: 'LinkPickerPlugin[]',
|
|
1219
|
+
description: 'Plugins that provide link suggestions / search capabilities.'
|
|
1220
|
+
}, {
|
|
1221
|
+
name: 'previewableLinksOnly',
|
|
1222
|
+
type: 'boolean',
|
|
1223
|
+
description: 'Disables URLs that do not have an embeddable preview'
|
|
1224
|
+
}, {
|
|
1225
|
+
name: 'recentSearchListSize',
|
|
1226
|
+
type: 'number',
|
|
1227
|
+
description: 'Showing dynamic list size based on window height'
|
|
1228
|
+
}, {
|
|
1229
|
+
name: 'shouldRenderNoResultsImage',
|
|
1230
|
+
type: 'boolean',
|
|
1231
|
+
description: 'Controls showing the image in the no results state'
|
|
1232
|
+
}, {
|
|
1233
|
+
name: 'submitOnInputChange',
|
|
1234
|
+
type: 'boolean',
|
|
1235
|
+
description: 'This prop disables submit button and handles submit on input change'
|
|
1236
|
+
}, {
|
|
1237
|
+
name: 'url',
|
|
1238
|
+
type: 'string',
|
|
1239
|
+
description: 'The url of the linked resource for editing.'
|
|
1240
|
+
}]
|
|
1241
|
+
}, {
|
|
1242
|
+
name: 'Card',
|
|
1243
|
+
package: '@atlaskit/smart-card',
|
|
1244
|
+
description: 'Smart Links enhance URLs into interactive previews, offering a contextualized experience within Atlassian products. They come in inline, block, and embed formats, respecting content permissions and compliance settings.',
|
|
1245
|
+
status: 'general-availability',
|
|
1246
|
+
usageGuidelines: ['Use inline for links in body text; block when you need extra context or a card-style preview; embed when users should engage with the linked content in place.'],
|
|
1247
|
+
contentGuidelines: [],
|
|
1248
|
+
accessibilityGuidelines: ['Use descriptive link text for inline appearance; avoid generic "click here" or the raw URL when possible.', 'Ensure the card container is keyboard focusable and has a clear accessible name indicating it is a link or preview.', 'Ensure loading and error states are announced to screen readers (e.g. aria-live or status text).'],
|
|
1249
|
+
keywords: ['smart-card', 'card', 'smart link', 'inline', 'block', 'embed', 'link', 'preview'],
|
|
1250
|
+
category: 'linking',
|
|
1251
|
+
examples: ['import { cssMap } from \'@atlaskit/css\';\nimport Link from \'@atlaskit/link\';\nimport { SmartCardProvider } from \'@atlaskit/link-provider\';\nimport { ResolvedClient, ResolvedClientEmbedUrl } from \'@atlaskit/link-test-helpers\';\nimport { Box, Grid, Stack } from \'@atlaskit/primitives/compiled\';\nimport SectionMessage from \'@atlaskit/section-message\';\nimport { Card } from \'../../src\';\nconst gridStyles = cssMap({\n\troot: {\n\t\tgridTemplateColumns: \'1fr 1fr\',\n\t},\n});\nexport default (): React.JSX.Element => (\n\t<SmartCardProvider client={new ResolvedClient(\'stg\')}>\n\t\t<Box paddingBlockStart="space.300">\n\t\t\t<Grid alignItems="center" columnGap="space.100" xcss={gridStyles.root}>\n\t\t\t\t<Stack space="space.600">\n\t\t\t\t\t<SectionMessage>\n\t\t\t\t\t\tYou must be logged in to{\' \'}\n\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\thref="https://pug.jira-dev.com"\n\t\t\t\t\t\t\ttarget="_blank"\n\t\t\t\t\t\t\ttitle="Login to staging environment"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tstaging environment\n\t\t\t\t\t\t</Link>{\' \'}\n\t\t\t\t\t\tto load the examples.\n\t\t\t\t\t</SectionMessage>\n\t\t\t\t\t<Card appearance="inline" showHoverPreview={true} url={ResolvedClientEmbedUrl} />\n\t\t\t\t\t<Card appearance="block" url={ResolvedClientEmbedUrl} />\n\t\t\t\t</Stack>\n\t\t\t\t<Card appearance="embed" frameStyle="show" platform="web" url={ResolvedClientEmbedUrl} />\n\t\t\t</Grid>\n\t\t</Box>\n\t</SmartCardProvider>\n);', "import { SmartCardProvider } from '@atlaskit/link-provider';\nimport { ResolvedClient, ResolvedClientUrl } from '@atlaskit/link-test-helpers';\nimport { Card } from '../../src';\nexport default (): React.JSX.Element => (\n\t<SmartCardProvider client={new ResolvedClient('stg')}>\n\t\t<Card appearance=\"block\" url={ResolvedClientUrl} />\n\t</SmartCardProvider>\n);", "import { SmartCardProvider } from '@atlaskit/link-provider';\nimport { ResolvedClient, ResolvedClientUrl } from '@atlaskit/link-test-helpers';\nimport { Card } from '../../src';\nexport default (): React.JSX.Element => (\n\t<SmartCardProvider client={new ResolvedClient('stg')}>\n\t\t<Card appearance=\"inline\" url={ResolvedClientUrl} />\n\t</SmartCardProvider>\n);"],
|
|
1252
|
+
props: [{
|
|
1253
|
+
name: 'actionOptions',
|
|
1254
|
+
type: 'CardActionVisibilityOptions & { previewAction?: { hideBlanket?: boolean; size?: EmbedModalSize; }; rovoChatAction?: { optIn: boolean; }; }',
|
|
1255
|
+
description: 'Configure visibility of actions available.\nBy default, smart links show all actions available on the views.\nSet `hide` to true to disable all actions.\nSet `hide` to false and set `exclude` to enable only specific actions.'
|
|
1256
|
+
}, {
|
|
1257
|
+
name: 'appearance',
|
|
1258
|
+
type: '"inline" | "block" | "embed"',
|
|
1259
|
+
description: 'Define smart card default appearance.',
|
|
1260
|
+
isRequired: true
|
|
1261
|
+
}, {
|
|
1262
|
+
name: 'children',
|
|
1263
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal'
|
|
1264
|
+
}, {
|
|
1265
|
+
name: 'CompetitorPrompt',
|
|
1266
|
+
type: 'ComponentClass<{ linkType?: string; sourceUrl: string; }, any> | FunctionComponent<{ linkType?: string; sourceUrl: string; }>',
|
|
1267
|
+
description: 'Competitor Prompt Component for Competitor link experiment'
|
|
1268
|
+
}, {
|
|
1269
|
+
name: 'container',
|
|
1270
|
+
type: 'HTMLElement',
|
|
1271
|
+
description: 'The container which `react-lazily-render` listens to for scroll events.\nThis property can be used in a scenario where you want to specify your own scroll container\nwhile the Card component is (lazy)loading.'
|
|
1272
|
+
}, {
|
|
1273
|
+
name: 'disablePreviewPanel',
|
|
1274
|
+
type: 'boolean',
|
|
1275
|
+
description: 'When Preview panel is supported, onClick is ignored and the panel opens by default.\nThis prop allows smartlinks inside of editor to bypass that as they have other ways to open Preview panel.'
|
|
1276
|
+
}, {
|
|
1277
|
+
name: 'embedIframeRef',
|
|
1278
|
+
type: '((instance: HTMLIFrameElement) => void) | RefObject<HTMLIFrameElement>',
|
|
1279
|
+
description: 'React referenced value on embed iframe.'
|
|
1280
|
+
}, {
|
|
1281
|
+
name: 'embedIframeUrlType',
|
|
1282
|
+
type: '"href" | "interactiveHref"',
|
|
1283
|
+
description: 'Type of URL used with embed iframe. By default, the embed use `data.preview.href` from link response.\n`interactiveHref` is suitable for displaying iframe content that contains "more editable" version of\nthe link, e.g. includes toolbar.\nIt is only available on supported link response with `data.preview.interactiveHref`.'
|
|
1284
|
+
}, {
|
|
1285
|
+
name: 'fallbackComponent',
|
|
1286
|
+
type: 'ComponentClass<{}, any> | FunctionComponent<{}>',
|
|
1287
|
+
description: 'A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.'
|
|
1288
|
+
}, {
|
|
1289
|
+
name: 'forwardedRef',
|
|
1290
|
+
type: '((instance: any) => void) | RefObject<any>'
|
|
1291
|
+
}, {
|
|
1292
|
+
name: 'frameStyle',
|
|
1293
|
+
type: '"show" | "hide" | "showOnHover"',
|
|
1294
|
+
description: 'A prop that determines the style of a frame:\nwhether to show it, hide it or only show it when a user hovers over embed.'
|
|
1295
|
+
}, {
|
|
1296
|
+
name: 'hoverPreviewOptions',
|
|
1297
|
+
type: 'HoverPreviewOptions',
|
|
1298
|
+
description: 'Configuration for hover card.'
|
|
1299
|
+
}, {
|
|
1300
|
+
name: 'id',
|
|
1301
|
+
type: 'string',
|
|
1302
|
+
description: 'Unique id for smart link used in analytics.'
|
|
1303
|
+
}, {
|
|
1304
|
+
name: 'inheritDimensions',
|
|
1305
|
+
type: 'boolean',
|
|
1306
|
+
description: "Determines whether width and height of an embed card are to be inherited from the parent.\nIf `true`, embed iframe will remove restrictions on iframe aspect ratio, height and width.\nThe parent container needs to override a style `.loader-wrapper` and set the desirable height there.\n(For instance, 'height: 100%')"
|
|
1307
|
+
}, {
|
|
1308
|
+
name: 'inlinePreloaderStyle',
|
|
1309
|
+
type: '"on-left-with-skeleton" | "on-right-without-skeleton"',
|
|
1310
|
+
description: 'By default, inline resolving states show a frame with a spinner on the left.\nAn alternative is to remove the frame and place the spinner on the right by setting this value to `on-right-without-skeleton`.\nThis property is specific to inline links in the editor.'
|
|
1311
|
+
}, {
|
|
1312
|
+
name: 'isHovered',
|
|
1313
|
+
type: 'boolean',
|
|
1314
|
+
description: 'A flag that determines whether a card is in a hover state. Currently used for inline links in editor only.'
|
|
1315
|
+
}, {
|
|
1316
|
+
name: 'isSelected',
|
|
1317
|
+
type: 'boolean',
|
|
1318
|
+
description: 'Show selected state of smart link.'
|
|
1319
|
+
}, {
|
|
1320
|
+
name: 'onClick',
|
|
1321
|
+
type: '(event: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>) => void',
|
|
1322
|
+
description: 'A callback function after a link is clicked.'
|
|
1323
|
+
}, {
|
|
1324
|
+
name: 'onError',
|
|
1325
|
+
type: '(data: { err?: Error; status: "errored" | "fallback" | "unauthorized" | "forbidden" | "not_found"; url: string; }) => void',
|
|
1326
|
+
description: 'A callback function currently invoked in two cases:\n1. When the `CardState.status` is one of `ErrorCardType`. "err" property in argument will be undefined in this case\n This does not mean that smart card failed to render.\n2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card successfully.\n "err" property in argument will be provided in this case.\n Presence of an err property indicates that the client should either render their own fallback\n or provide a fallbackComponent prop which will be rendered instead smart card component.\n If fallbackComponent is not provided, smart card will render null'
|
|
1327
|
+
}, {
|
|
1328
|
+
name: 'onResolve',
|
|
1329
|
+
type: '(data: { aspectRatio?: number; extensionKey?: string; title?: string; url?: string; }) => void',
|
|
1330
|
+
description: 'A callback function after the url is resolved into smart card.'
|
|
1331
|
+
}, {
|
|
1332
|
+
name: 'placeholder',
|
|
1333
|
+
type: 'string',
|
|
1334
|
+
description: 'String to be displayed while the Card component is (lazy)loading.'
|
|
1335
|
+
}, {
|
|
1336
|
+
name: 'removeTextHighlightingFromTitle',
|
|
1337
|
+
type: 'boolean',
|
|
1338
|
+
description: 'When set to true, the text fragment will be removed from the title.\nThis will have no impact on the url and text highlighting will still persist in the url,\nhowever the text fragment will be stripped from the title of the smart card.\nFor example, when set to true: "my name | :~:text=highlight this" will be displayed as "my name"'
|
|
1339
|
+
}, {
|
|
1340
|
+
name: 'resolvingPlaceholder',
|
|
1341
|
+
type: 'string',
|
|
1342
|
+
description: 'When defined, this placeholder will be displayed while the smart card is resolving. This is only useful for inline cards.'
|
|
1343
|
+
}, {
|
|
1344
|
+
name: 'showHoverPreview',
|
|
1345
|
+
type: 'boolean',
|
|
1346
|
+
description: 'Flag to display hover preview on hover.'
|
|
1347
|
+
}, {
|
|
1348
|
+
name: 'truncateInline',
|
|
1349
|
+
type: 'boolean',
|
|
1350
|
+
description: 'When set to true, inline cards will be truncated to one line'
|
|
1351
|
+
}, {
|
|
1352
|
+
name: 'ui',
|
|
1353
|
+
type: '{ clickableContainer?: boolean; enableSnippetRenderer?: boolean; hideBackground?: boolean; hideElevation?: boolean; hidePadding?: boolean; removeBlockRestriction?: boolean; size?: SmartLinkSize; theme?: SmartLinkTheme; zIndex?: number; }'
|
|
1354
|
+
}, {
|
|
1355
|
+
name: 'url',
|
|
1356
|
+
type: 'string',
|
|
1357
|
+
description: 'The url link of the resource to be resolved and shown as Smart Link.'
|
|
1358
|
+
}]
|
|
1359
|
+
}, {
|
|
1360
|
+
name: 'HoverCard',
|
|
1361
|
+
package: '@atlaskit/smart-card',
|
|
1362
|
+
description: 'Hover cards can be used as a standalone component to wrap any React component and display information about a supplied URL when the user hovers over the child. Different actions are shown depending on the resource type.',
|
|
1363
|
+
status: 'general-availability',
|
|
1364
|
+
usageGuidelines: ['Use when you need a Smart Link preview on hover over a custom trigger (e.g. text, icon). For hover preview on inline Smart Links in body text, use Card with showHoverPreview instead.'],
|
|
1365
|
+
contentGuidelines: [],
|
|
1366
|
+
accessibilityGuidelines: ['Provide a keyboard-accessible way to open the preview (e.g. focus or explicit trigger); do not rely on hover alone.', 'Ensure the trigger element has an accessible name and role (e.g. link or button).', 'Ensure the hover card content is announced when shown (e.g. aria-describedby or live region) and can be dismissed via keyboard.'],
|
|
1367
|
+
keywords: ['smart-card', 'hover card', 'hover', 'preview', 'smart link'],
|
|
1368
|
+
category: 'linking',
|
|
1369
|
+
examples: ["import { IntlProvider } from 'react-intl';\nimport { SmartCardProvider } from '@atlaskit/link-provider';\nimport { ResolvedClient, ResolvedClientEmbedUrl } from '@atlaskit/link-test-helpers';\nimport { HoverCard } from '../../src/hoverCard';\nimport HoverOverMe from '../utils/hover-card-box';\nexport default (): React.JSX.Element => (\n\t<IntlProvider locale=\"en\">\n\t\t<SmartCardProvider client={new ResolvedClient('stg')}>\n\t\t\t<HoverCard url={ResolvedClientEmbedUrl}>\n\t\t\t\t<HoverOverMe />\n\t\t\t</HoverCard>\n\t\t</SmartCardProvider>\n\t</IntlProvider>\n);"],
|
|
1370
|
+
props: [{
|
|
1371
|
+
name: 'actionOptions',
|
|
1372
|
+
type: 'CardActionVisibilityOptions & { previewAction?: { hideBlanket?: boolean; size?: EmbedModalSize; }; rovoChatAction?: { optIn: boolean; }; }',
|
|
1373
|
+
description: 'Configure visibility of server and client actions'
|
|
1374
|
+
}, {
|
|
1375
|
+
name: 'allowEventPropagation',
|
|
1376
|
+
type: 'boolean',
|
|
1377
|
+
description: 'Allow click event to bubble up from hover preview trigger component.'
|
|
1378
|
+
}, {
|
|
1379
|
+
name: 'canOpen',
|
|
1380
|
+
type: 'boolean',
|
|
1381
|
+
description: 'Determines if the hover card is allowed to open. If changed from true to false while the\nhover card is open, the hover card will be closed.'
|
|
1382
|
+
}, {
|
|
1383
|
+
name: 'children',
|
|
1384
|
+
type: 'React.ReactElement<any, string | React.JSXElementConstructor<any>>',
|
|
1385
|
+
description: 'React children component over which the hover card can be triggered.',
|
|
1386
|
+
isRequired: true
|
|
1387
|
+
}, {
|
|
1388
|
+
name: 'closeOnChildClick',
|
|
1389
|
+
type: 'boolean',
|
|
1390
|
+
description: 'Determines if the hover card should close when the children passed in are\nclicked.'
|
|
1391
|
+
}, {
|
|
1392
|
+
name: 'hoverPreviewOptions',
|
|
1393
|
+
type: 'HoverPreviewOptions',
|
|
1394
|
+
description: 'Additional configurations for hover card.'
|
|
1395
|
+
}, {
|
|
1396
|
+
name: 'id',
|
|
1397
|
+
type: 'string',
|
|
1398
|
+
description: 'Unique ID for a hover card. Used for analytics.'
|
|
1399
|
+
}, {
|
|
1400
|
+
name: 'label',
|
|
1401
|
+
type: 'string',
|
|
1402
|
+
description: 'Refers to an `aria-label` attribute. Sets an accessible name for the hover card to announce it to users of assistive technology.\nUsage of either this, or the `titleId` attribute is strongly recommended.'
|
|
1403
|
+
}, {
|
|
1404
|
+
name: 'onVisibilityChange',
|
|
1405
|
+
type: '(isVisible: boolean) => void',
|
|
1406
|
+
description: 'Callback function that is called when the hover card is visible or hidden.'
|
|
1407
|
+
}, {
|
|
1408
|
+
name: 'role',
|
|
1409
|
+
type: 'string',
|
|
1410
|
+
description: 'Use this to set the accessibility role for the hover card.\nShould be used along with `label` or `titleId` for supported roles.'
|
|
1411
|
+
}, {
|
|
1412
|
+
name: 'shouldRenderToParent',
|
|
1413
|
+
type: 'boolean',
|
|
1414
|
+
description: 'Whether the hover card should render to the parent element, to the\natlaskit-portal-container at the root of the document. Defaults to false.'
|
|
1415
|
+
}, {
|
|
1416
|
+
name: 'titleId',
|
|
1417
|
+
type: 'string',
|
|
1418
|
+
description: 'Id referenced by the hover card `aria-labelledby` attribute.\nUsage of either this, or the `label` attribute is strongly recommended.'
|
|
1419
|
+
}, {
|
|
1420
|
+
name: 'url',
|
|
1421
|
+
type: 'string',
|
|
1422
|
+
description: 'Hover card will display data from this url.',
|
|
1423
|
+
isRequired: true
|
|
1424
|
+
}, {
|
|
1425
|
+
name: 'zIndex',
|
|
1426
|
+
type: 'number',
|
|
1427
|
+
description: 'Z-index that the hover card should be displayed in.\nThis is passed to the portal component.'
|
|
1428
|
+
}]
|
|
1429
|
+
}, {
|
|
1430
|
+
name: 'LinkUrl',
|
|
1431
|
+
package: '@atlaskit/smart-card',
|
|
1432
|
+
description: 'LinkUrl is a plain hyperlink (<a>) with a built-in safety check. Use it when you want to warn users if the link description looks like one URL but the actual destination is different.',
|
|
1433
|
+
status: 'general-availability',
|
|
1434
|
+
usageGuidelines: ['Use when the link text might look like one URL but point elsewhere—e.g. user-generated or external links—so users get a warning before navigating.'],
|
|
1435
|
+
contentGuidelines: [],
|
|
1436
|
+
accessibilityGuidelines: ['Use descriptive link text that indicates the destination or action; avoid exposing only the URL when possible.', 'Ensure the safety-check warning (when link text and destination differ) is announced to screen readers.'],
|
|
1437
|
+
keywords: ['smart-card', 'link', 'url', 'safety', 'hyperlink'],
|
|
1438
|
+
category: 'linking',
|
|
1439
|
+
examples: ['import Link from \'@atlaskit/link\';\nimport { CardClient, SmartCardProvider } from \'@atlaskit/link-provider\';\nimport { UnAuthClient } from \'@atlaskit/link-test-helpers\';\nimport LinkUrl from \'../../src/view/LinkUrl\';\nexport default (): React.JSX.Element => (\n\t<div>\n\t\t<h2>Link safety warning</h2>\n\t\t<ul>\n\t\t\t<li>\n\t\t\t\tLink description is a URL and it\'s different from a destination.\n\t\t\t\t<br />\n\t\t\t\t<LinkUrl href="https://www.google.com/">atlassian.com</LinkUrl>\n\t\t\t</li>\n\t\t</ul>\n\t\t<h2>No link safety warning</h2>\n\t\t<ul>\n\t\t\t<li>\n\t\t\t\tLink description is a plain text.\n\t\t\t\t<br />\n\t\t\t\t<LinkUrl href="https://www.google.com/">Here is a google link</LinkUrl>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\tLink description is a URL identical to a destination.\n\t\t\t\t<br />\n\t\t\t\t<LinkUrl href="https://www.atlassian.com/solutions/devops">\n\t\t\t\t\thttps://www.atlassian.com/solutions/devops\n\t\t\t\t</LinkUrl>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\tLink is a multi-line URL.\n\t\t\t\t<br />\n\t\t\t\t<LinkUrl href="https://www.atlassian.com/solutions/devops">\n\t\t\t\t\t<p>Help</p>\n\t\t\t\t\t<Link href="https://www.atlassian.com/solutions/devops">\n\t\t\t\t\t\thttps://www.atlassian.com/solutions/devops\n\t\t\t\t\t</Link>\n\t\t\t\t</LinkUrl>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\tLink is a multi-line URL.\n\t\t\t\t<br />\n\t\t\t\t<LinkUrl href="https://hello.atlassian.com/wiki">\n\t\t\t\t\t<div>Help</div>\n\t\t\t\t\t<span>https://hello.atlas...</span>\n\t\t\t\t</LinkUrl>\n\t\t\t</li>\n\t\t</ul>\n\t\t<h2>Link with smart link resolver</h2>\n\t\t<ul>\n\t\t\t<li>\n\t\t\t\tThis link trigger smart link resolver\n\t\t\t\t<br />\n\t\t\t\t<SmartCardProvider client={new CardClient(\'stg\')}>\n\t\t\t\t\t<LinkUrl enableResolve={true} href="https://www.google.com/">\n\t\t\t\t\t\thttps://www.resolved-link.com/\n\t\t\t\t\t</LinkUrl>\n\t\t\t\t</SmartCardProvider>\n\t\t\t</li>\n\t\t\t<li>\n\t\t\t\tThis link trigger smart link resolver with unauth\n\t\t\t\t<br />\n\t\t\t\t<SmartCardProvider client={new UnAuthClient()}>\n\t\t\t\t\t<LinkUrl enableResolve={true} href="https://www.unauth-link.com/">\n\t\t\t\t\t\thttps://www.unauth-link.com/\n\t\t\t\t\t</LinkUrl>\n\t\t\t\t</SmartCardProvider>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n);'],
|
|
1440
|
+
props: [{
|
|
1441
|
+
name: 'checkSafety',
|
|
1442
|
+
type: 'boolean',
|
|
1443
|
+
description: 'Determines if we want to perform a link safety check. True by default.'
|
|
1444
|
+
}, {
|
|
1445
|
+
name: 'enableResolve',
|
|
1446
|
+
type: 'boolean',
|
|
1447
|
+
description: 'Determines if we want to resolve the URL in the background for Rovo indexing. This has no impact on the UI/UX. False by default.'
|
|
1448
|
+
}, {
|
|
1449
|
+
name: 'isLinkComponent',
|
|
1450
|
+
type: 'boolean'
|
|
1451
|
+
}]
|
|
1452
|
+
}, {
|
|
1453
|
+
name: 'FlexibleCard',
|
|
1454
|
+
package: '@atlaskit/smart-card',
|
|
1455
|
+
description: 'Flexible Smart Links (FlexibleCard / Flexible UI) is a composable system of data elements inside UI blocks for building custom Smart Link views. It does not affect inline, block, or embed appearance.',
|
|
1456
|
+
status: 'general-availability',
|
|
1457
|
+
usageGuidelines: ['Use when you need a custom block-style Smart Link layout. Define the layout with blocks first (title, metadata, preview, footer), then add elements inside blocks for granular content.'],
|
|
1458
|
+
contentGuidelines: [],
|
|
1459
|
+
accessibilityGuidelines: ['Use a logical structure (e.g. heading hierarchy) so the card is navigable by assistive tech.', 'Ensure all interactive elements inside blocks (links, buttons, actions) are focusable and have accessible names.'],
|
|
1460
|
+
keywords: ['smart-card', 'flexible', 'flexible card', 'flexible ui', 'blocks', 'elements', 'composable'],
|
|
1461
|
+
category: 'linking',
|
|
1462
|
+
examples: ["import LikeIcon from '@atlaskit/icon/core/thumbs-up';\nimport { type JsonLd } from '@atlaskit/json-ld-types';\nimport { CardClient as Client, SmartCardProvider as Provider } from '@atlaskit/link-provider';\nimport { response1 } from '@atlaskit/link-test-helpers';\nimport {\n\tActionName,\n\tCard,\n\tElementName,\n\tFooterBlock,\n\tMetadataBlock,\n\tPreviewBlock,\n\tSmartLinkPosition,\n\tSmartLinkSize,\n\tSnippetBlock,\n\tTitleBlock,\n} from '../../src';\nclass CustomClient extends Client {\n\tfetchData() {\n\t\treturn Promise.resolve(response1 as JsonLd.Response);\n\t}\n}\nexport default (): React.JSX.Element => (\n\t<Provider client={new CustomClient('stg')}>\n\t\t<Card appearance=\"block\" url={response1.data.url}>\n\t\t\t<TitleBlock\n\t\t\t\tsize={SmartLinkSize.Medium}\n\t\t\t\tmetadata={[{ name: ElementName.State }, { name: ElementName.AuthorGroup }]}\n\t\t\t\tposition={SmartLinkPosition.Center}\n\t\t\t/>\n\t\t\t<PreviewBlock />\n\t\t\t<MetadataBlock\n\t\t\t\tprimary={[\n\t\t\t\t\t{ name: ElementName.CreatedOn },\n\t\t\t\t\t{ name: ElementName.ModifiedOn },\n\t\t\t\t\t{ name: ElementName.CommentCount },\n\t\t\t\t\t{ name: ElementName.ReactCount },\n\t\t\t\t]}\n\t\t\t/>\n\t\t\t<SnippetBlock />\n\t\t\t<FooterBlock\n\t\t\t\tactions={[\n\t\t\t\t\t{\n\t\t\t\t\t\tname: ActionName.CustomAction,\n\t\t\t\t\t\ticon: <LikeIcon color=\"currentColor\" label=\"Like\" />,\n\t\t\t\t\t\tcontent: 'Like',\n\t\t\t\t\t\tonClick: () => console.log('Like clicked!'),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: ActionName.EditAction,\n\t\t\t\t\t\tonClick: () => console.log('Edit clicked!'),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: ActionName.DeleteAction,\n\t\t\t\t\t\tonClick: () => console.log('Delete clicked!'),\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t/>\n\t\t</Card>\n\t</Provider>\n);"],
|
|
1463
|
+
props: [{
|
|
1464
|
+
name: 'actions',
|
|
1465
|
+
type: 'ActionItem[]',
|
|
1466
|
+
description: 'An array of action items to be displayed after the title\non the right of the block.\nAn action item provides preset icon and label, with exception of\na custom action which either Icon or label must be provided.\n@see ActionItem',
|
|
1467
|
+
defaultValue: '[]'
|
|
1468
|
+
}, {
|
|
1469
|
+
name: 'anchorRef',
|
|
1470
|
+
type: '((instance: HTMLAnchorElement) => void) | React.RefObject<HTMLAnchorElement>',
|
|
1471
|
+
description: 'Ref passed into the link <a> element'
|
|
1472
|
+
}, {
|
|
1473
|
+
name: 'anchorTarget',
|
|
1474
|
+
type: '"_blank" | "_self" | "_top" | "_parent"',
|
|
1475
|
+
description: 'Determines the href target behaviour of the Link.'
|
|
1476
|
+
}, {
|
|
1477
|
+
name: 'blockRef',
|
|
1478
|
+
type: '((instance: HTMLDivElement) => void) | React.RefObject<HTMLDivElement>',
|
|
1479
|
+
description: 'Ref to block wrapper div.'
|
|
1480
|
+
}, {
|
|
1481
|
+
name: 'children',
|
|
1482
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1483
|
+
description: 'React children'
|
|
1484
|
+
}, {
|
|
1485
|
+
name: 'CompetitorPrompt',
|
|
1486
|
+
type: 'React.ComponentClass<{ linkType?: string; sourceUrl: string; }, any> | React.FunctionComponent<{ linkType?: string; sourceUrl: string; }>',
|
|
1487
|
+
description: 'Competitor Prompt Component for Competitor link'
|
|
1488
|
+
}, {
|
|
1489
|
+
name: 'hideIcon',
|
|
1490
|
+
type: 'boolean',
|
|
1491
|
+
description: 'Determines whether TitleBlock will hide the Link Icon.',
|
|
1492
|
+
defaultValue: 'false'
|
|
1493
|
+
}, {
|
|
1494
|
+
name: 'hideIconLoadingSkeleton',
|
|
1495
|
+
type: 'boolean',
|
|
1496
|
+
description: 'For image icons in the title, whether to hide the loading skeleton while the image is loading.'
|
|
1497
|
+
}, {
|
|
1498
|
+
name: 'hideRetry',
|
|
1499
|
+
type: 'boolean',
|
|
1500
|
+
description: 'This option determines whenever we show any of the links and messages on the right side of the block,\nlike "connect to preview" or "Can\'t find link" or "Restricted link, try another account" etc.\nDefault is false.'
|
|
1501
|
+
}, {
|
|
1502
|
+
name: 'hideTitleTooltip',
|
|
1503
|
+
type: 'boolean',
|
|
1504
|
+
description: '[Experiment] Determines whether the linked title should display tooltip on hover.'
|
|
1505
|
+
}, {
|
|
1506
|
+
name: 'icon',
|
|
1507
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1508
|
+
description: 'The icon to display in the title block. Overrides any icon that is retrieved from\nthe Smart Link.'
|
|
1509
|
+
}, {
|
|
1510
|
+
name: 'maxLines',
|
|
1511
|
+
type: 'number',
|
|
1512
|
+
description: 'Determines the maximum number of lines for the underlying link text to\nspread over. Default is 2. Maximum is 2.'
|
|
1513
|
+
}, {
|
|
1514
|
+
name: 'metadata',
|
|
1515
|
+
type: 'ElementItem[]',
|
|
1516
|
+
description: 'An array of metadata elements to display in the TitleBlock.\nBy default elements will be shown to the right of the TitleBlock.\nThe visibility of the element is determine by the link data.\nIf link contain no data to display a particular element, the element\nwill simply not show up.\n@see ElementItem'
|
|
1517
|
+
}, {
|
|
1518
|
+
name: 'onActionMenuOpenChange',
|
|
1519
|
+
type: '(options: OnActionMenuOpenChangeOptions) => void',
|
|
1520
|
+
description: 'Called when the action dropdown menu (if present) is open/closed.\nReceives an object with `isOpen` state.'
|
|
1521
|
+
}, {
|
|
1522
|
+
name: 'placeholderId',
|
|
1523
|
+
type: 'string',
|
|
1524
|
+
description: 'A unique identifier for the placeholder loading state, which is constant across all loading states of the same item.\nA unique identifier for the placeholder loading state, which is constant across all loading states of the same item.'
|
|
1525
|
+
}, {
|
|
1526
|
+
name: 'position',
|
|
1527
|
+
type: 'SmartLinkPosition',
|
|
1528
|
+
description: 'Determines the position of the link icon in relative to the vertical\nheight of the TitleBlock. It can either be centred or placed on “top”.\nDefault is top.'
|
|
1529
|
+
}, {
|
|
1530
|
+
name: 'showActionOnHover',
|
|
1531
|
+
type: 'boolean',
|
|
1532
|
+
description: 'Determines whether TitleBlock will hide actions until the user is hovering\nover the link.'
|
|
1533
|
+
}, {
|
|
1534
|
+
name: 'size',
|
|
1535
|
+
type: 'SmartLinkSize',
|
|
1536
|
+
description: 'The size of the block and the size that the underlying elements should\ndefault to.'
|
|
1537
|
+
}, {
|
|
1538
|
+
name: 'subtitle',
|
|
1539
|
+
type: 'ElementItem[]',
|
|
1540
|
+
description: 'An array of metadata elements to display in the TitleBlock.\nBy default elements will be shown below the link text.\nThe visibility of the element is determine by the link data.\nIf link contain no data to display a particular element, the element\nwill simply not show up.\n@see ElementItem'
|
|
1541
|
+
}, {
|
|
1542
|
+
name: 'text',
|
|
1543
|
+
type: 'string',
|
|
1544
|
+
description: 'The text to display in the link. Overrides any text that is retrieved from\nthe Smart Link.'
|
|
1545
|
+
}, {
|
|
1546
|
+
name: 'url',
|
|
1547
|
+
type: 'string',
|
|
1548
|
+
description: 'The URL of the link for Competitor Prompt'
|
|
1549
|
+
}]
|
|
1550
|
+
}, {
|
|
1551
|
+
name: 'TitleBlock',
|
|
1552
|
+
package: '@atlaskit/smart-card',
|
|
1553
|
+
description: 'A block component for the Smart Link title row. Used inside FlexibleCard to show title, icon, and optional metadata and actions.',
|
|
1554
|
+
status: 'general-availability',
|
|
1555
|
+
usageGuidelines: ['Use for the main title row of a block Smart Link when you need title, icon, optional subtitle, metadata, or actions in one row.'],
|
|
1556
|
+
contentGuidelines: [],
|
|
1557
|
+
accessibilityGuidelines: ['Ensure the title is exposed as a heading or has an accessible name so it is announced as the primary label for the card.', 'If the title row icon conveys meaning, give it an accessible name (e.g. aria-label); otherwise mark as decorative.'],
|
|
1558
|
+
keywords: ['smart-card', 'title block', 'flexible', 'block'],
|
|
1559
|
+
category: 'linking',
|
|
1560
|
+
examples: ["import { TitleBlock } from '../../src';\nimport ExampleContainer from './example-container';\nexport default (): React.JSX.Element => (\n\t<ExampleContainer>\n\t\t<TitleBlock />\n\t</ExampleContainer>\n);"],
|
|
1561
|
+
props: [{
|
|
1562
|
+
name: 'actions',
|
|
1563
|
+
type: 'ActionItem[]',
|
|
1564
|
+
description: 'An array of action items to be displayed after the title\non the right of the block.\nAn action item provides preset icon and label, with exception of\na custom action which either Icon or label must be provided.\n@see ActionItem',
|
|
1565
|
+
defaultValue: '[]'
|
|
1566
|
+
}, {
|
|
1567
|
+
name: 'anchorRef',
|
|
1568
|
+
type: '((instance: HTMLAnchorElement) => void) | React.RefObject<HTMLAnchorElement>',
|
|
1569
|
+
description: 'Ref passed into the link <a> element'
|
|
1570
|
+
}, {
|
|
1571
|
+
name: 'anchorTarget',
|
|
1572
|
+
type: '"_blank" | "_self" | "_top" | "_parent"',
|
|
1573
|
+
description: 'Determines the href target behaviour of the Link.'
|
|
1574
|
+
}, {
|
|
1575
|
+
name: 'blockRef',
|
|
1576
|
+
type: '((instance: HTMLDivElement) => void) | React.RefObject<HTMLDivElement>',
|
|
1577
|
+
description: 'Ref to block wrapper div.'
|
|
1578
|
+
}, {
|
|
1579
|
+
name: 'children',
|
|
1580
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1581
|
+
description: 'React children'
|
|
1582
|
+
}, {
|
|
1583
|
+
name: 'CompetitorPrompt',
|
|
1584
|
+
type: 'React.ComponentClass<{ linkType?: string; sourceUrl: string; }, any> | React.FunctionComponent<{ linkType?: string; sourceUrl: string; }>',
|
|
1585
|
+
description: 'Competitor Prompt Component for Competitor link'
|
|
1586
|
+
}, {
|
|
1587
|
+
name: 'hideIcon',
|
|
1588
|
+
type: 'boolean',
|
|
1589
|
+
description: 'Determines whether TitleBlock will hide the Link Icon.',
|
|
1590
|
+
defaultValue: 'false'
|
|
1591
|
+
}, {
|
|
1592
|
+
name: 'hideIconLoadingSkeleton',
|
|
1593
|
+
type: 'boolean',
|
|
1594
|
+
description: 'For image icons in the title, whether to hide the loading skeleton while the image is loading.'
|
|
1595
|
+
}, {
|
|
1596
|
+
name: 'hideRetry',
|
|
1597
|
+
type: 'boolean',
|
|
1598
|
+
description: 'This option determines whenever we show any of the links and messages on the right side of the block,\nlike "connect to preview" or "Can\'t find link" or "Restricted link, try another account" etc.\nDefault is false.'
|
|
1599
|
+
}, {
|
|
1600
|
+
name: 'hideTitleTooltip',
|
|
1601
|
+
type: 'boolean',
|
|
1602
|
+
description: '[Experiment] Determines whether the linked title should display tooltip on hover.'
|
|
1603
|
+
}, {
|
|
1604
|
+
name: 'icon',
|
|
1605
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1606
|
+
description: 'The icon to display in the title block. Overrides any icon that is retrieved from\nthe Smart Link.'
|
|
1607
|
+
}, {
|
|
1608
|
+
name: 'maxLines',
|
|
1609
|
+
type: 'number',
|
|
1610
|
+
description: 'Determines the maximum number of lines for the underlying link text to\nspread over. Default is 2. Maximum is 2.'
|
|
1611
|
+
}, {
|
|
1612
|
+
name: 'metadata',
|
|
1613
|
+
type: 'ElementItem[]',
|
|
1614
|
+
description: 'An array of metadata elements to display in the TitleBlock.\nBy default elements will be shown to the right of the TitleBlock.\nThe visibility of the element is determine by the link data.\nIf link contain no data to display a particular element, the element\nwill simply not show up.\n@see ElementItem'
|
|
1615
|
+
}, {
|
|
1616
|
+
name: 'onActionMenuOpenChange',
|
|
1617
|
+
type: '(options: OnActionMenuOpenChangeOptions) => void',
|
|
1618
|
+
description: 'Called when the action dropdown menu (if present) is open/closed.\nReceives an object with `isOpen` state.'
|
|
1619
|
+
}, {
|
|
1620
|
+
name: 'placeholderId',
|
|
1621
|
+
type: 'string',
|
|
1622
|
+
description: 'A unique identifier for the placeholder loading state, which is constant across all loading states of the same item.\nA unique identifier for the placeholder loading state, which is constant across all loading states of the same item.'
|
|
1623
|
+
}, {
|
|
1624
|
+
name: 'position',
|
|
1625
|
+
type: 'SmartLinkPosition',
|
|
1626
|
+
description: 'Determines the position of the link icon in relative to the vertical\nheight of the TitleBlock. It can either be centred or placed on “top”.\nDefault is top.'
|
|
1627
|
+
}, {
|
|
1628
|
+
name: 'showActionOnHover',
|
|
1629
|
+
type: 'boolean',
|
|
1630
|
+
description: 'Determines whether TitleBlock will hide actions until the user is hovering\nover the link.'
|
|
1631
|
+
}, {
|
|
1632
|
+
name: 'size',
|
|
1633
|
+
type: 'SmartLinkSize',
|
|
1634
|
+
description: 'The size of the block and the size that the underlying elements should\ndefault to.'
|
|
1635
|
+
}, {
|
|
1636
|
+
name: 'subtitle',
|
|
1637
|
+
type: 'ElementItem[]',
|
|
1638
|
+
description: 'An array of metadata elements to display in the TitleBlock.\nBy default elements will be shown below the link text.\nThe visibility of the element is determine by the link data.\nIf link contain no data to display a particular element, the element\nwill simply not show up.\n@see ElementItem'
|
|
1639
|
+
}, {
|
|
1640
|
+
name: 'text',
|
|
1641
|
+
type: 'string',
|
|
1642
|
+
description: 'The text to display in the link. Overrides any text that is retrieved from\nthe Smart Link.'
|
|
1643
|
+
}, {
|
|
1644
|
+
name: 'url',
|
|
1645
|
+
type: 'string',
|
|
1646
|
+
description: 'The URL of the link for Competitor Prompt'
|
|
1647
|
+
}]
|
|
1648
|
+
}, {
|
|
1649
|
+
name: 'MetadataBlock',
|
|
1650
|
+
package: '@atlaskit/smart-card',
|
|
1651
|
+
description: 'A block component that displays a row of metadata elements (e.g. created by, due date, state) in a Smart Link.',
|
|
1652
|
+
status: 'general-availability',
|
|
1653
|
+
usageGuidelines: ['Use when you need a single row of metadata (e.g. created by, due date, state) in a block Smart Link.'],
|
|
1654
|
+
contentGuidelines: [],
|
|
1655
|
+
accessibilityGuidelines: ['Ensure metadata is available to screen readers (e.g. not conveyed only by color or icon).', 'Use a list or group with an accessible name if the metadata row has a specific purpose (e.g. "Contributors", "Dates").'],
|
|
1656
|
+
keywords: ['smart-card', 'metadata block', 'flexible', 'block', 'metadata'],
|
|
1657
|
+
category: 'linking',
|
|
1658
|
+
examples: ["import { ElementName, MetadataBlock } from '../../src';\nimport ExampleContainer from './example-container';\nexport default (): React.JSX.Element => (\n\t<ExampleContainer>\n\t\t<MetadataBlock\n\t\t\tprimary={[{ name: ElementName.CollaboratorGroup }, { name: ElementName.ModifiedOn }]}\n\t\t/>\n\t</ExampleContainer>\n);"],
|
|
1659
|
+
props: [{
|
|
1660
|
+
name: 'blockRef',
|
|
1661
|
+
type: '((instance: HTMLDivElement) => void) | React.RefObject<HTMLDivElement>',
|
|
1662
|
+
description: 'Ref to block wrapper div.'
|
|
1663
|
+
}, {
|
|
1664
|
+
name: 'children',
|
|
1665
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1666
|
+
description: 'React children'
|
|
1667
|
+
}, {
|
|
1668
|
+
name: 'hideIconLoadingSkeleton',
|
|
1669
|
+
type: 'boolean',
|
|
1670
|
+
description: 'For image icons in the title, whether to hide the loading skeleton while the image is loading.'
|
|
1671
|
+
}, {
|
|
1672
|
+
name: 'maxLines',
|
|
1673
|
+
type: 'number',
|
|
1674
|
+
description: 'Determines the number of lines the metadata should span across.\nDefault is 2. Maximum is 2.',
|
|
1675
|
+
defaultValue: '2'
|
|
1676
|
+
}, {
|
|
1677
|
+
name: 'placeholderId',
|
|
1678
|
+
type: 'string',
|
|
1679
|
+
description: 'A unique identifier for the placeholder loading state, which is constant across all loading states of the same item.'
|
|
1680
|
+
}, {
|
|
1681
|
+
name: 'primary',
|
|
1682
|
+
type: 'ElementItem[]',
|
|
1683
|
+
description: 'An array of metadata elements to display on the left.\nBy default elements will be shown to the right of the TitleBlock.\nThe visibility of the element is determine by the link data.\nIf link contain no data to display a particular element, the element\nwill simply not show up.\n@see ElementItem',
|
|
1684
|
+
defaultValue: '[]'
|
|
1685
|
+
}, {
|
|
1686
|
+
name: 'secondary',
|
|
1687
|
+
type: 'ElementItem[]',
|
|
1688
|
+
description: 'An array of metadata elements to display on the right.\nBy default elements will be shown to the right of the TitleBlock.\nThe visibility of the element is determine by the link data.\nIf link contain no data to display a particular element, the element\nwill simply not show up.\n@see ElementItem',
|
|
1689
|
+
defaultValue: '[]'
|
|
1690
|
+
}, {
|
|
1691
|
+
name: 'size',
|
|
1692
|
+
type: 'SmartLinkSize',
|
|
1693
|
+
description: 'The size of the block and the size that the underlying elements should\ndefault to.'
|
|
1694
|
+
}]
|
|
1695
|
+
}, {
|
|
1696
|
+
name: 'PreviewBlock',
|
|
1697
|
+
package: '@atlaskit/smart-card',
|
|
1698
|
+
description: 'A block component that displays a preview image or media for the Smart Link.',
|
|
1699
|
+
status: 'general-availability',
|
|
1700
|
+
usageGuidelines: ['Use when the linked resource has a preview image or media and you want to surface it in the block card.'],
|
|
1701
|
+
contentGuidelines: [],
|
|
1702
|
+
accessibilityGuidelines: ['If the preview image conveys information, provide meaningful alt text; if purely decorative, use alt="" or aria-hidden.', 'Ensure no critical information is shown only in the preview; duplicate in text or metadata when needed.'],
|
|
1703
|
+
keywords: ['smart-card', 'preview block', 'flexible', 'block', 'preview', 'image'],
|
|
1704
|
+
category: 'linking',
|
|
1705
|
+
examples: ["import { PreviewBlock } from '../../src';\nimport ExampleContainer from './example-container';\nexport default (): React.JSX.Element => (\n\t<ExampleContainer>\n\t\t<PreviewBlock />\n\t</ExampleContainer>\n);"],
|
|
1706
|
+
props: [{
|
|
1707
|
+
name: 'blockRef',
|
|
1708
|
+
type: '((instance: HTMLDivElement) => void) | React.RefObject<HTMLDivElement>',
|
|
1709
|
+
description: 'Ref to block wrapper div.'
|
|
1710
|
+
}, {
|
|
1711
|
+
name: 'children',
|
|
1712
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1713
|
+
description: 'React children'
|
|
1714
|
+
}, {
|
|
1715
|
+
name: 'hideIconLoadingSkeleton',
|
|
1716
|
+
type: 'boolean',
|
|
1717
|
+
description: 'For image icons in the title, whether to hide the loading skeleton while the image is loading.'
|
|
1718
|
+
}, {
|
|
1719
|
+
name: 'ignoreContainerPadding',
|
|
1720
|
+
type: 'boolean',
|
|
1721
|
+
description: 'Indicate whether preview block should ignore the padding its parent container.\nDefault is false.'
|
|
1722
|
+
}, {
|
|
1723
|
+
name: 'overrideUrl',
|
|
1724
|
+
type: 'string',
|
|
1725
|
+
description: 'An image URL to render. This will replace the default image from smart link data.'
|
|
1726
|
+
}, {
|
|
1727
|
+
name: 'placeholderId',
|
|
1728
|
+
type: 'string',
|
|
1729
|
+
description: 'A unique identifier for the placeholder loading state, which is constant across all loading states of the same item.'
|
|
1730
|
+
}, {
|
|
1731
|
+
name: 'placement',
|
|
1732
|
+
type: 'MediaPlacement',
|
|
1733
|
+
description: 'The placement of the preview block in relation of its container.\nThis makes the preview block leave flex layout to absolute positioning\nto the left/right of the container.'
|
|
1734
|
+
}, {
|
|
1735
|
+
name: 'size',
|
|
1736
|
+
type: 'SmartLinkSize',
|
|
1737
|
+
description: 'The size of the block and the size that the underlying elements should\ndefault to.'
|
|
1738
|
+
}]
|
|
1739
|
+
}, {
|
|
1740
|
+
name: 'FooterBlock',
|
|
1741
|
+
package: '@atlaskit/smart-card',
|
|
1742
|
+
description: 'A block component for the Smart Link footer, typically showing actions (e.g. copy, open, follow).',
|
|
1743
|
+
status: 'general-availability',
|
|
1744
|
+
usageGuidelines: ['Use at the bottom of a FlexibleCard when you need actions such as copy link, open, or follow.'],
|
|
1745
|
+
contentGuidelines: [],
|
|
1746
|
+
accessibilityGuidelines: ['Give each action button or control an accessible name (e.g. "Copy link", "Open in new tab") so purpose is clear to screen readers.', 'Ensure actions are keyboard operable and appear in a logical tab order.'],
|
|
1747
|
+
keywords: ['smart-card', 'footer block', 'flexible', 'block', 'actions'],
|
|
1748
|
+
category: 'linking',
|
|
1749
|
+
examples: ["import { FooterBlock } from '../../src';\nimport ExampleContainer from './example-container';\nexport default (): React.JSX.Element => (\n\t<ExampleContainer>\n\t\t<FooterBlock />\n\t</ExampleContainer>\n);"],
|
|
1750
|
+
props: [{
|
|
1751
|
+
name: 'actions',
|
|
1752
|
+
type: 'ActionItem[]',
|
|
1753
|
+
description: 'An array of actions to be displayed on the right.\nAdding more than three actions will result in the second and following\nactions being hidden inside of a dropdown\n@see ActionItem'
|
|
1754
|
+
}, {
|
|
1755
|
+
name: 'alwaysShow',
|
|
1756
|
+
type: 'boolean',
|
|
1757
|
+
description: 'Allows rendering of the footer regardless of whether the block has resolved'
|
|
1758
|
+
}, {
|
|
1759
|
+
name: 'blockRef',
|
|
1760
|
+
type: '((instance: HTMLDivElement) => void) | React.RefObject<HTMLDivElement>',
|
|
1761
|
+
description: 'Ref to block wrapper div.'
|
|
1762
|
+
}, {
|
|
1763
|
+
name: 'children',
|
|
1764
|
+
type: 'string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal',
|
|
1765
|
+
description: 'React children'
|
|
1766
|
+
}, {
|
|
1767
|
+
name: 'hideIconLoadingSkeleton',
|
|
1768
|
+
type: 'boolean',
|
|
1769
|
+
description: 'For image icons in the title, whether to hide the loading skeleton while the image is loading.'
|
|
1770
|
+
}, {
|
|
1771
|
+
name: 'hideProvider',
|
|
1772
|
+
type: 'boolean',
|
|
1773
|
+
description: 'Allows hiding of the resources provider'
|
|
1774
|
+
}, {
|
|
1775
|
+
name: 'onActionMenuOpenChange',
|
|
1776
|
+
type: '(options: OnActionMenuOpenChangeOptions) => void',
|
|
1777
|
+
description: 'Function to be called when footer action dropdown open state is changed.'
|
|
1778
|
+
}, {
|
|
1779
|
+
name: 'placeholderId',
|
|
1780
|
+
type: 'string',
|
|
1781
|
+
description: 'A unique identifier for the placeholder loading state, which is constant across all loading states of the same item.'
|
|
1782
|
+
}, {
|
|
1783
|
+
name: 'size',
|
|
1784
|
+
type: 'SmartLinkSize',
|
|
1785
|
+
description: 'The size of the block and the size that the underlying elements should\ndefault to.'
|
|
1786
|
+
}]
|
|
1787
|
+
}, {
|
|
1788
|
+
name: 'useSmartLinkEvents',
|
|
1789
|
+
package: '@atlaskit/smart-card',
|
|
1790
|
+
description: 'Hook that returns a SmartLinkEvents object for dispatching analytics events for a given URL. Currently supports insertSmartLink.',
|
|
1791
|
+
status: 'general-availability',
|
|
1792
|
+
usageGuidelines: ['Use when you need to fire Smart Link analytics (e.g. insert events) from custom UI that is not the default Card.'],
|
|
1793
|
+
contentGuidelines: [],
|
|
1794
|
+
accessibilityGuidelines: ['Use analytics events to understand usage; ensure event wiring does not change focus, interrupt screen readers, or alter semantics.'],
|
|
1795
|
+
keywords: ['smart-card', 'hooks', 'analytics', 'useSmartLinkEvents', 'events'],
|
|
1796
|
+
category: 'linking',
|
|
1797
|
+
examples: ["import {\n\tAnalyticsContext,\n\tAnalyticsListener,\n\ttype UIAnalyticsEvent,\n} from '@atlaskit/analytics-next';\nimport Heading from '@atlaskit/heading';\nimport { SmartCardProvider } from '@atlaskit/link-provider';\nimport { ResolvedClient, ResolvedClientUrl } from '@atlaskit/link-test-helpers';\nimport { Box, Text, xcss } from '@atlaskit/primitives';\nimport { Card } from '../../src';\nconst headingBoxStyles = xcss({\n\tmarginBottom: 'space.100',\n});\nconst stackBoxStyles = xcss({\n\tmarginTop: 'space.100',\n});\ntype ExampleComponentProps = {\n\tsetRecentEvents: React.Dispatch<React.SetStateAction<UIAnalyticsEvent[]>>;\n};\nconst ExampleComponent = ({ setRecentEvents }: ExampleComponentProps): JSX.Element => {\n\tconst handleOnClick = React.useCallback(\n\t\t(e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => {\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t},\n\t\t[],\n\t);\n\treturn (\n\t\t<AnalyticsListener\n\t\t\tonEvent={(event) => {\n\t\t\t\tsetRecentEvents((prevEvents) => [...prevEvents, event]);\n\t\t\t}}\n\t\t\tchannel=\"*\"\n\t\t>\n\t\t\t<AnalyticsContext\n\t\t\t\tdata={{\n\t\t\t\t\tsource: 'content',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tdisplayCategory: 'link',\n\t\t\t\t\t\tdisplay: 'url',\n\t\t\t\t\t\tid: '123',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SmartCardProvider client={new ResolvedClient('dev')}>\n\t\t\t\t\t<Card\n\t\t\t\t\t\turl={ResolvedClientUrl}\n\t\t\t\t\t\tappearance=\"inline\"\n\t\t\t\t\t\tplatform=\"web\"\n\t\t\t\t\t\tshowHoverPreview={true}\n\t\t\t\t\t\tonClick={handleOnClick}\n\t\t\t\t\t/>\n\t\t\t\t</SmartCardProvider>\n\t\t\t</AnalyticsContext>\n\t\t</AnalyticsListener>\n\t);\n};\nexport default (): React.JSX.Element => {\n\tconst [recentEvents, setRecentEvents] = React.useState<UIAnalyticsEvent[]>([]);\n\tconst mostRecent10Events = React.useMemo(() => {\n\t\treturn Array.from({ length: 10 }, (_, i) => {\n\t\t\treturn recentEvents.at(recentEvents.length - i - 1);\n\t\t});\n\t}, [recentEvents]);\n\treturn (\n\t\t<Box>\n\t\t\t<Box xcss={headingBoxStyles}>\n\t\t\t\t<Heading size=\"medium\">Interact with the link below and see events being fired</Heading>\n\t\t\t</Box>\n\t\t\t<ExampleComponent setRecentEvents={setRecentEvents} />\n\t\t\t<Box xcss={stackBoxStyles}>\n\t\t\t\t<Heading size=\"small\">The 10 Most Recent Events Fired</Heading>\n\t\t\t\t<ol>\n\t\t\t\t\t{mostRecent10Events.map((event, index) => {\n\t\t\t\t\t\tif (event === undefined) {\n\t\t\t\t\t\t\treturn <li key={index}></li>;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst { action, actionSubject, eventType } = event.payload;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t>{`actionSubject: ${actionSubject}, action: ${action}, eventType: ${eventType}`}</Text>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ol>\n\t\t\t</Box>\n\t\t</Box>\n\t);\n};"],
|
|
1798
|
+
props: [{
|
|
1799
|
+
name: 'actionOptions',
|
|
1800
|
+
type: 'CardActionVisibilityOptions & { previewAction?: { hideBlanket?: boolean; size?: EmbedModalSize; }; rovoChatAction?: { optIn: boolean; }; }',
|
|
1801
|
+
description: 'Configure visibility of actions available.\nBy default, smart links show all actions available on the views.\nSet `hide` to true to disable all actions.\nSet `hide` to false and set `exclude` to enable only specific actions.'
|
|
1802
|
+
}, {
|
|
1803
|
+
name: 'appearance',
|
|
1804
|
+
type: '"inline" | "block" | "embed"',
|
|
1805
|
+
description: 'Define smart card default appearance.',
|
|
1806
|
+
isRequired: true
|
|
1807
|
+
}, {
|
|
1808
|
+
name: 'children',
|
|
1809
|
+
type: 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal',
|
|
1810
|
+
description: ''
|
|
1811
|
+
}, {
|
|
1812
|
+
name: 'CompetitorPrompt',
|
|
1813
|
+
type: 'ComponentClass<{ linkType?: string; sourceUrl: string; }, any> | FunctionComponent<{ linkType?: string; sourceUrl: string; }>',
|
|
1814
|
+
description: 'Competitor Prompt Component for Competitor link experiment'
|
|
1815
|
+
}, {
|
|
1816
|
+
name: 'container',
|
|
1817
|
+
type: 'HTMLElement',
|
|
1818
|
+
description: 'The container which `react-lazily-render` listens to for scroll events.\nThis property can be used in a scenario where you want to specify your own scroll container\nwhile the Card component is (lazy)loading.'
|
|
1819
|
+
}, {
|
|
1820
|
+
name: 'disablePreviewPanel',
|
|
1821
|
+
type: 'boolean',
|
|
1822
|
+
description: 'When Preview panel is supported, onClick is ignored and the panel opens by default.\nThis prop allows smartlinks inside of editor to bypass that as they have other ways to open Preview panel.'
|
|
1823
|
+
}, {
|
|
1824
|
+
name: 'embedIframeRef',
|
|
1825
|
+
type: '((instance: HTMLIFrameElement) => void) | RefObject<HTMLIFrameElement>',
|
|
1826
|
+
description: 'React referenced value on embed iframe.'
|
|
1827
|
+
}, {
|
|
1828
|
+
name: 'embedIframeUrlType',
|
|
1829
|
+
type: '"href" | "interactiveHref"',
|
|
1830
|
+
description: 'Type of URL used with embed iframe. By default, the embed use `data.preview.href` from link response.\n`interactiveHref` is suitable for displaying iframe content that contains "more editable" version of\nthe link, e.g. includes toolbar.\nIt is only available on supported link response with `data.preview.interactiveHref`.'
|
|
1831
|
+
}, {
|
|
1832
|
+
name: 'fallbackComponent',
|
|
1833
|
+
type: 'ComponentClass<{}, any> | FunctionComponent<{}>',
|
|
1834
|
+
description: 'A React component responsible for returning a fallback UI when smart link fails to render because of uncaught errors.'
|
|
1835
|
+
}, {
|
|
1836
|
+
name: 'frameStyle',
|
|
1837
|
+
type: '"show" | "hide" | "showOnHover"',
|
|
1838
|
+
description: 'A prop that determines the style of a frame:\nwhether to show it, hide it or only show it when a user hovers over embed.'
|
|
1839
|
+
}, {
|
|
1840
|
+
name: 'hoverPreviewOptions',
|
|
1841
|
+
type: 'HoverPreviewOptions',
|
|
1842
|
+
description: 'Configuration for hover card.'
|
|
1843
|
+
}, {
|
|
1844
|
+
name: 'id',
|
|
1845
|
+
type: 'string',
|
|
1846
|
+
description: 'Unique id for smart link used in analytics.'
|
|
1847
|
+
}, {
|
|
1848
|
+
name: 'inheritDimensions',
|
|
1849
|
+
type: 'boolean',
|
|
1850
|
+
description: "Determines whether width and height of an embed card are to be inherited from the parent.\nIf `true`, embed iframe will remove restrictions on iframe aspect ratio, height and width.\nThe parent container needs to override a style `.loader-wrapper` and set the desirable height there.\n(For instance, 'height: 100%')"
|
|
1851
|
+
}, {
|
|
1852
|
+
name: 'inlinePreloaderStyle',
|
|
1853
|
+
type: '"on-left-with-skeleton" | "on-right-without-skeleton"',
|
|
1854
|
+
description: 'By default, inline resolving states show a frame with a spinner on the left.\nAn alternative is to remove the frame and place the spinner on the right by setting this value to `on-right-without-skeleton`.\nThis property is specific to inline links in the editor.'
|
|
1855
|
+
}, {
|
|
1856
|
+
name: 'isHovered',
|
|
1857
|
+
type: 'boolean',
|
|
1858
|
+
description: 'A flag that determines whether a card is in a hover state. Currently used for inline links in editor only.'
|
|
1859
|
+
}, {
|
|
1860
|
+
name: 'isSelected',
|
|
1861
|
+
type: 'boolean',
|
|
1862
|
+
description: 'Show selected state of smart link.'
|
|
1863
|
+
}, {
|
|
1864
|
+
name: 'onClick',
|
|
1865
|
+
type: '(event: MouseEvent<Element, MouseEvent> | KeyboardEvent<Element>) => void',
|
|
1866
|
+
description: 'A callback function after a link is clicked.'
|
|
1867
|
+
}, {
|
|
1868
|
+
name: 'onError',
|
|
1869
|
+
type: '(data: { err?: Error; status: "errored" | "fallback" | "unauthorized" | "forbidden" | "not_found"; url: string; }) => void',
|
|
1870
|
+
description: 'A callback function currently invoked in two cases:\n1. When the `CardState.status` is one of `ErrorCardType`. "err" property in argument will be undefined in this case\n This does not mean that smart card failed to render.\n2. When there is any unhandled error inside smart card while rendering, resulting in failure to render smart card successfully.\n "err" property in argument will be provided in this case.\n Presence of an err property indicates that the client should either render their own fallback\n or provide a fallbackComponent prop which will be rendered instead smart card component.\n If fallbackComponent is not provided, smart card will render null'
|
|
1871
|
+
}, {
|
|
1872
|
+
name: 'onResolve',
|
|
1873
|
+
type: '(data: { aspectRatio?: number; extensionKey?: string; title?: string; url?: string; }) => void',
|
|
1874
|
+
description: 'A callback function after the url is resolved into smart card.'
|
|
1875
|
+
}, {
|
|
1876
|
+
name: 'placeholder',
|
|
1877
|
+
type: 'string',
|
|
1878
|
+
description: 'String to be displayed while the Card component is (lazy)loading.'
|
|
1879
|
+
}, {
|
|
1880
|
+
name: 'removeTextHighlightingFromTitle',
|
|
1881
|
+
type: 'boolean',
|
|
1882
|
+
description: 'When set to true, the text fragment will be removed from the title.\nThis will have no impact on the url and text highlighting will still persist in the url,\nhowever the text fragment will be stripped from the title of the smart card.\nFor example, when set to true: "my name | :~:text=highlight this" will be displayed as "my name"'
|
|
1883
|
+
}, {
|
|
1884
|
+
name: 'resolvingPlaceholder',
|
|
1885
|
+
type: 'string',
|
|
1886
|
+
description: 'When defined, this placeholder will be displayed while the smart card is resolving. This is only useful for inline cards.'
|
|
1887
|
+
}, {
|
|
1888
|
+
name: 'showHoverPreview',
|
|
1889
|
+
type: 'boolean',
|
|
1890
|
+
description: 'Flag to display hover preview on hover.'
|
|
1891
|
+
}, {
|
|
1892
|
+
name: 'truncateInline',
|
|
1893
|
+
type: 'boolean',
|
|
1894
|
+
description: 'When set to true, inline cards will be truncated to one line'
|
|
1895
|
+
}, {
|
|
1896
|
+
name: 'ui',
|
|
1897
|
+
type: '{ clickableContainer?: boolean; enableSnippetRenderer?: boolean; hideBackground?: boolean; hideElevation?: boolean; hidePadding?: boolean; removeBlockRestriction?: boolean; size?: SmartLinkSize; theme?: SmartLinkTheme; zIndex?: number; }',
|
|
1898
|
+
description: ''
|
|
1899
|
+
}, {
|
|
1900
|
+
name: 'url',
|
|
1901
|
+
type: 'string',
|
|
1902
|
+
description: 'The url link of the resource to be resolved and shown as Smart Link.'
|
|
1903
|
+
}]
|
|
1904
|
+
}, {
|
|
1905
|
+
name: 'useSmartLinkActions',
|
|
1906
|
+
package: '@atlaskit/smart-card',
|
|
1907
|
+
description: 'Hook that extracts and returns actions for a given URL. Relies on Smart Link context; usages must be wrapped in SmartCardProvider or equivalent.',
|
|
1908
|
+
status: 'general-availability',
|
|
1909
|
+
usageGuidelines: ['Use when building custom action UI (buttons, menus) that should expose Smart Link actions (e.g. Preview, Open) for a given URL.'],
|
|
1910
|
+
contentGuidelines: [],
|
|
1911
|
+
accessibilityGuidelines: ['When rendering actions from this hook (e.g. buttons or menus), provide accessible labels (e.g. from action.text) and ensure keyboard support.'],
|
|
1912
|
+
keywords: ['smart-card', 'hooks', 'useSmartLinkActions', 'actions'],
|
|
1913
|
+
category: 'linking',
|
|
1914
|
+
examples: ["import React, { useCallback } from 'react';\nimport Button from '@atlaskit/button/new';\nimport { SmartCardProvider } from '@atlaskit/link-provider';\nimport { ResolvedClient, ResolvedClientUrl } from '@atlaskit/link-test-helpers';\nimport { Box } from '@atlaskit/primitives/compiled';\nimport { Card, CardAction } from '../../src';\nimport { useSmartLinkActions } from '../../src/hooks';\nimport ExampleContainer from './example-container';\nconst PreviewButton = ({ url }: { url: string }) => {\n\tconst actions = useSmartLinkActions({ url, appearance: 'block' });\n\t// actions are returned in an array, find the preview action\n\tconst previewAction = actions.find((action) => action.id === 'preview-content');\n\tconst handleClick = useCallback(() => {\n\t\tif (previewAction) {\n\t\t\tpreviewAction.invoke();\n\t\t}\n\t}, [previewAction]);\n\tif (!previewAction) {\n\t\treturn null;\n\t}\n\treturn <Button onClick={handleClick}>{previewAction.text}</Button>;\n};\nconst UseSmartLinkActionsExample = (): React.JSX.Element => (\n\t<ExampleContainer>\n\t\t<SmartCardProvider client={new ResolvedClient()}>\n\t\t\t<Card\n\t\t\t\tappearance=\"block\"\n\t\t\t\turl={ResolvedClientUrl}\n\t\t\t\tactionOptions={{ hide: false, exclude: [CardAction.PreviewAction] }}\n\t\t\t/>\n\t\t\t<Box paddingBlockStart=\"space.200\">\n\t\t\t\t<PreviewButton url={ResolvedClientUrl} />\n\t\t\t</Box>\n\t\t</SmartCardProvider>\n\t</ExampleContainer>\n);\nexport default UseSmartLinkActionsExample;"],
|
|
1915
|
+
props: [{
|
|
1916
|
+
name: 'actionOptions',
|
|
1917
|
+
type: 'CardActionVisibilityOptions & { previewAction?: { hideBlanket?: boolean; size?: EmbedModalSize; }; rovoChatAction?: { optIn: boolean; }; }',
|
|
1918
|
+
description: 'Configure the visiblity of actions'
|
|
1919
|
+
}, {
|
|
1920
|
+
name: 'appearance',
|
|
1921
|
+
type: 'CardAppearance | "embedPreview" | "flexible" | "hoverCardPreview" | "url"',
|
|
1922
|
+
description: 'Appearance under which these actions will be invoked.\n@example `block` for card views.',
|
|
1923
|
+
isRequired: true
|
|
1924
|
+
}, {
|
|
1925
|
+
name: 'origin',
|
|
1926
|
+
type: '"smartLinkCard" | "smartLinkEmbed" | "smartLinkInline" | "smartLinkPreviewHoverCard"',
|
|
1927
|
+
description: 'Smart link origin that the action being invoked from.'
|
|
1928
|
+
}, {
|
|
1929
|
+
name: 'platform',
|
|
1930
|
+
type: '"web" | "mobile"',
|
|
1931
|
+
description: 'Platform on which actions are being invoked.',
|
|
1932
|
+
defaultValue: "'web'"
|
|
1933
|
+
}, {
|
|
1934
|
+
name: 'prefetch',
|
|
1935
|
+
type: 'boolean',
|
|
1936
|
+
description: 'Whether to prefetch the link.',
|
|
1937
|
+
defaultValue: 'false'
|
|
1938
|
+
}, {
|
|
1939
|
+
name: 'url',
|
|
1940
|
+
type: 'string',
|
|
1941
|
+
description: 'Smart Link URL for which actions will be invoked.\n@example https://start.atlassian.com',
|
|
1942
|
+
isRequired: true
|
|
1943
|
+
}]
|
|
1944
|
+
}];
|