Merge pull request #10 from masuP9/fix/can-edit-client-side-routing

Fix/can edit client side routing

src/manifest.json

@@ -11,10 +11,8 @@
   "content_scripts": [
     {
       "matches": [
-        "https://note.mu/notes/new",
-        "https://note.mu/notes/*/edit",
-        "https://note.com/notes/new",
-        "https://note.com/notes/*/edit"
+        "https://note.mu/*",
+        "https://note.com/*"
       ],
       "js": [
         "content_script.js"

src/scripts/actions.ts

@@ -1,3 +1,13 @@
+export const OBSERVE_EDITOR = 'OBSERVE_EDITOR';
+export type ObserveEditorAction = {
+  type: typeof OBSERVE_EDITOR;
+  payload: Boolean;
+};
+
+export function observeEditorAction(isObserve: Boolean): ObserveEditorAction {
+  return { type: OBSERVE_EDITOR, payload: isObserve };
+}
+
 export const SELECT_IMAGE = 'SELECT_IMAGE';
 export type SelectImageAction = {
   type: typeof SELECT_IMAGE;
@@ -26,4 +36,4 @@ export function changeSizeImageAction(): ChangeSizeImageAction {
   return { type: CHANGE_SIZE_IMAGE };
 }
 
-export type ActionTypes = SelectImageAction | DeselectImageAction | ChangeSizeImageAction;
+export type ActionTypes = SelectImageAction | DeselectImageAction | ChangeSizeImageAction | ObserveEditorAction;

src/scripts/components/AltEditor/AltEditor.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { Position } from '../../reducer';
+import { Position } from '../../reducer/imageReducer';
 
 const Form = styled.form<{ position: Position }>`
   position: absolute !important;

src/scripts/components/App/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AltEditor } from '../AltEditor';
-import { Position } from '../../reducer';
+import { Position } from '../../reducer/imageReducer';
 import { deselectImageAction } from '../../actions';
 import { store } from '../../store';
 

src/scripts/observers.ts

@@ -1,5 +1,5 @@
 import { store } from './store';
-import { selectImageAction, deselectImageAction, changeSizeImageAction } from './actions';
+import { selectImageAction, deselectImageAction, changeSizeImageAction, observeEditorAction } from './actions';
 
 const imageObserver = new MutationObserver((records) => {
   records.forEach((record) => {
@@ -51,7 +51,9 @@ const noteBodyObserver = new MutationObserver((records) => {
 export const editorObserver = new MutationObserver((recodes, observer) => {
   recodes.forEach((_recode) => {
     const noteBody = document.getElementById('note-body');
-    if (noteBody != undefined) {
+    const state = store.getState();
+
+    if (noteBody != undefined && state.observer.observingEditor !== true) {
       const existingImages = noteBody.querySelectorAll('img');
       if (existingImages.length > 0) {
         existingImages.forEach((img) => {
@@ -60,7 +62,10 @@ export const editorObserver = new MutationObserver((recodes, observer) => {
       }
 
       noteBodyObserver.observe(noteBody, { childList: true });
-      observer.disconnect();
+      store.dispatch(observeEditorAction(true));
+    } else if (noteBody == null && state.observer.observingEditor === true) {
+      noteBodyObserver.disconnect();
+      store.dispatch(observeEditorAction(false));
     }
   });
 });

src/scripts/reducer.ts → src/scripts/reducer/imageReducer.ts

@@ -1,5 +1,4 @@
-import { combineReducers } from 'redux';
-import { DESELECT_IMAGE, SELECT_IMAGE, ActionTypes, CHANGE_SIZE_IMAGE } from './actions';
+import { DESELECT_IMAGE, SELECT_IMAGE, ActionTypes, CHANGE_SIZE_IMAGE } from '../actions';
 
 export type Position = {
   left: number;
@@ -51,8 +50,3 @@ export function imageReducer(state = initialState, action: Action) {
       return state;
   }
 }
-
-export const rootReducer = combineReducers({
-  image: imageReducer,
-});
-export type AppState = ReturnType<typeof rootReducer>;

src/scripts/reducer/index.ts

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+import { imageReducer } from './imageReducer';
+import { observerReducer } from './observerReducer';
+
+export const rootReducer = combineReducers({
+  image: imageReducer,
+  observer: observerReducer,
+});
+export type AppState = ReturnType<typeof rootReducer>;

src/scripts/reducer/observerReducer.ts

@@ -0,0 +1,24 @@
+import { OBSERVE_EDITOR, ActionTypes } from '../actions';
+
+export type State = {
+  observingEditor: Boolean;
+};
+
+const initialState: State = {
+  observingEditor: false,
+};
+
+type Action = ActionTypes;
+
+export function observerReducer(state = initialState, action: Action) {
+  switch (action.type) {
+    case OBSERVE_EDITOR: {
+      return {
+        ...state,
+        observingEditor: action.payload,
+      };
+    }
+    default:
+      return state;
+  }
+}